EasyUI中放置Droppable的使用以及实现拖拽排序-蒲公英云

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

场景

效果

![Image 1][]

实现

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][]

新建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>