js一个区域拖拽到另一个区域，拖拽后还可以排序。知识点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable

技术点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable。所以得引入相关的文件，我这就不写了。

　　　　拖拽组件draggable知识点可以参考：https://www.cnblogs.com/goforf/p/4244149.html

　　　　放置组件droppable知识点可以参考：https://blog.csdn.net/weixin_33795806/article/details/91765375

　　　　放置组件sortable知识点可以参考：https://www.cnblogs.com/neil120/p/6094618.html

思路：通过draggable左边拖拽到右边区域，触发放置组件droppable，然后在右边区域排序sortable。

　　　其中不管是拖拽到右边区域还是在右边区域排序都会触发放置组件droppable，所以要在拖拽的时候给个随机的id或者其它属性(能唯一就行)，
要来识别是拖拽还是排序触发droppable的。

效果图：

上图代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽demo</title>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
    </head>
    <style type="text/css">
        .move_box{
            display: inline-block;
            width: 500px;
            height: 400px;
            margin-left: 100px;
            border: 1px solid #ccc;
            vertical-align: top;
        }
        .item{
            width: 300px;
            height: 30px;
            margin: 30px auto 0;
            border: 1px solid #ccc;
            cursor: all-scroll;
        }
        .moveTo_box{
            display: inline-block;
            width: 500px;
            height: 400px;
            margin-left: 100px;
            border: 1px solid #ccc;
        }
    </style>
    <body>
        <div class="move_main">
            <div class="move_box">
                <div class="item item1" tagid="1" id="1">1</div>
                <div class="item item2" tagid="2" id="2">2</div>
                <div class="item item3" tagid="3" id="3">3</div>
            </div>
            <div class="moveTo_box">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".move_box .item").draggable({
                helper: "clone",//拖拽克隆
                drag: function(event, ui){
                    var id = getRandomCode(32);//随机数
                    ui.helper.context.attributes.id.value = id;
                }
            });
            
            
            $( ".moveTo_box" ).droppable({
                drop: function( event, ui ) {
                    var dragContent = ui.draggable.context.outerHTML;
                    var dragId = '';
                    if(ui.draggable.context.attributes.id){
                        dragId = ui.draggable.context.attributes.id.value;
                    }
                    var children = $(this).children();
                    var flag = 0;
                    for(var i=0; i<children.length; i++){
                        var curId = children.eq(i).attr('id');
                        if(dragId == curId){
                            flag += 1;                            
                        }
                    }
                    if(flag == 0){//flag等于0说明是拖拽的
                        $(this).append(dragContent);
                    }
                }
            })
            
            $( ".moveTo_box" ).sortable({
                  revert: true,
                  deactivate:function(event,ui){                  
                
                  }
            });
            $( ".moveTo_box .item" ).disableSelection();
            
        });
    
    function getRandomCode(length) {
       if (length > 0) {
          var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
          var nums = "";
          for (var i = 0; i < length; i++) {
             var r = parseInt(Math.random() * 61);
             nums += data[r];
          }
          return nums;
       } else {
          return false;
       }
    }
    </script>
</html>

js一个区域拖拽到另一个区域，拖拽后还可以排序。知识点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable

猜你喜欢