EasyUI中放置Droppable的使用以及实现拖拽排序

偏执的太偏执、 2023-10-18 19:26 96阅读 0赞

## 场景 ##

#### 效果 ####

![Image 1][]![20190605202902570.gif][]

## 实现 ##

webapp下新建droppable文件夹，在其下新建basic.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>可放置</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <style type="text/css">
        .drags{
            width:50px;
            hejght:50px;
            margin:5px;
            border:1px solid #ccc;
        }
        .container, #drop{
            width:300px;
            height:300px;
            border:1px solid #ccc;
            float:left;
            margin:5px;
        }
    </style>
    
    <div class="container">
        <div class="drags" id="drag1">drag1</div>
        <div class="drags" id="drag2">drag2</div>
        <div class="drags" id="drag3">drag3</div>
    </div>
    
    <div id="drop">
    </div>
    <script type="text/javascript">
            $(".drags").draggable({
                //拖拽时产生克隆对象
                proxy:"clone",
                //松开后返回原地
                revert:true
            });
            //设置为可放置
            $("#drop").droppable({
                //设置可接受的
                accept:"#drag1,#drag2",
                onDragEnter:function (e,source) {
                    //变成小手
                    $(source).draggable("options").cursor="pointer";
                    $(source).draggable("proxy").css("border","1px solid red");
                },
                onDragLeave:function (e,source) {
                    //变成不可放置
                    $(source).draggable("options").cursor="no-drop";
                    $(source).draggable("proxy").css("border","1px solid #ccc");
                },
                onDrop:function (e,source) {
    
                    $(this).append(source);
                }
            })
    </script>
    
    </body>
    </html>

### 拖拽排序实现 ###

#### 效果 ####

![Image 1][]![2019060520292766.gif][]

新建sort.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖动排序</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <ul style="margin:0;padding:0;margin-left:10px;">
        <li class="drag-item">Drag 1</li>
        <li class="drag-item">Drag 2</li>
        <li class="drag-item">Drag 3</li>
        <li class="drag-item">Drag 4</li>
        <li class="drag-item">Drag 5</li>
        <li class="drag-item">Drag 6</li>
    </ul>
    <style type="text/css">
        .drag-item{
            list-style-type:none;
            display:block;
            padding:5px;
            border:1px solid #ccc;
            margin:2px;
            width:300px;
            background: #fafafa;
        }
        .indicator{
            position: absolute;
            font-size:9px;
            width:10px;
            height:10px;
            display:none;
            color:red;
        }
    </style>
    <script type="text/javascript">
        //构造箭头对象，即两个>
        var indicator=$("<div class='indicator'>>></div>").appendTo("body");
        $(function () {
                //设置可拖拽并设置松开时返回原位置
                $(".drag-item").draggable({
                    revert:true
                }).droppable({//设置可放置
                    //拖拽时显示箭头
                    onDragOver:function (e,source) {
                        indicator.css({
                            display:"block",
                            //当前元素举例左边的距离-10
                            left:$(this).offset().left-10,
                            //当前元素距离顶部的举例+当前元素的高度-5
                            top:$(this).offset().top+$(this).outerHeight()-5
                        });
                    },
                    //设置拖拽离开时箭头消息
                    onDragLeave:function (e,source) {
                        indicator.hide();
                    },
                    //放下时将拖拽的元素放在当前元素之后并隐藏箭头
                    onDrop:function (e,source) {
                        $(source).insertAfter(this);
                        indicator.hide();
                    }
                })
        })
    </script>
    </body>
    </html>

[Image 1]: 
[20190605202902570.gif]: https://img-blog.csdnimg.cn/20190605202902570.gif
[2019060520292766.gif]: https://img-blog.csdnimg.cn/2019060520292766.gif