原生js实现一个简单的方块格子拖拽排序效果代码-html代码-BFW代码库

原生js实现一个简单的方块格子拖拽排序效果代码

代码语言：html

所属分类：拖放

代码描述：原生js代码实现一个简单的方块格子拖拽排序效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
            background: white;
        }
            [draggable] {
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
            .drag-list {
              overflow: hidden;
              margin: 10px auto;
              width: 500px;
              border: 1px solid #ccc;
            }
            .drag-item {
              float: left;
              padding: 50px 20px;
              width: 25%;
              text-align: center;
              color: #555;
              background: #ddd;
              border: 1px solid #ccc;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              -webkit-transition: 0.25s;
              -moz-transition: 0.25s;
              -o-transition: 0.25s;
              -ms-transition: 0.25s;
              transition: 0.25s;
            }
            .drag-start {
              opacity: 0.8;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
              filter: alpha(opacity=80);
            }
            .drag-enter {
              opacity: 0.5;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
              filter: alpha(opacity=50);
              -webkit-transform: scale(0.9);
              -moz-transform: scale(0.9);
              -o-transform: scale(0.9);
              -ms-transform: scale(0.9);
              transform: scale(0.9);
            }
    </style>



</head>

<body translate="no">
    <h1>Drag and Drop HTML5</h1>
    <div class="drag-list">
        <div class="drag-item" draggable="true">A</div>
        <div class="drag-item" draggable="true">B</div>
        <div class="drag-item" draggable="true">C</div>
        <div class="drag-item" draggable="true">D</div>
        <div class="drag-item" draggable="true">E</div>
        <div class="drag-item" draggable="true">F</div>
        <div class="drag-item" draggable="true">G</div>
        <div class="drag-item" draggable="true">H</div>
        <div class="drag-item" draggable="true">I</div>
        <div class="drag-item" draggable="true">J</div>
        <div class="drag-item" draggable="true">K</div>
        <div class="drag-item" draggable="true">L</div>
    </div>

    <script>
        function DragNSort(config) {
          this.$activeItem = null;
          this.$container = config.container;
          thi.........完整代码请登录后点击上方下载按钮下载查看