Navigation

基于拖放委托 + 容器自动滚动的拖放排序

基于拖放委托 + 容器自动滚动的拖放排序

引入 kissy.js

<script src='http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js'></script>

组织HTML

<div id="container2" class="container">
    <div class="box component">
        <s class="box-tp"><b></b></s>
        <div class="box-hd cheader">
            <h3>拖动头</h3>
        </div>
        <div class="box-bd">
            drag proxy 1
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    <div class="box component">
        <s class="box-tp"><b></b></s>
        <div class="box-hd cheader">
            <h3>拖动头</h3>
        </div>
        <div class="box-bd">
            drag proxy 2
        </div>
        <s class="box-bt"><b></b></s>
    </di>
    <div class="box component">
        <s class="box-tp"><b></b></s>
        <div class="box-hd cheader">
            <h3>拖动头</h3>
        </div>
        <div class="box-bd">
            drag proxy 3
        </div>
        <s class="box-bt"><b></b></s>
    </div>
</div>

加载 dd

KISSY.use("node,dd", function(S, Node, DD) {

    var DDM = DD.DDM,
        DraggableDelegate = DD.DraggableDelegate,
        DroppableDelegate = DD.DroppableDelegate,
        Draggable = DD.Draggable,
        Droppable = DD.Droppable,
        Scroll = DD.Scroll,
        Proxy = DD.Proxy;

});

初始化模块类实例

  1. 生成 DraggableDelegate 对象

    var dragDelegate = new DraggableDelegate({
    container:"#container2",
    handlers:['.cheader'],
    selector:'.component',
    move:true
});

  2. 生成 DroppableDelegate 对象

    var dropDelegate = new DroppableDelegate({
    container:"#container2",
    selector:'.component'
});

  3. 生成 Proxy 对象, 并关联到 DraggableDelegate 对象

    var proxy = new Proxy({
    /**
     * 如何产生替代节点
     * @param drag 当前拖对象
     */
    node:function(drag) {
        var n = S.one(drag.get("dragNode")[0].cloneNode(true));
        n.attr("id", S.guid("ks-dd-proxy"));
        n.css("opacity", 0.8);
        return n;
    },
    // 主体位置不跟随 proxy
    moveOnEnd:false,
    // 每次 proxy 都重新生成
    destroyOnEnd:true
});

proxy.attach(dragDelegate);

  4. 生成指定容器的 Scroll 对象, 并关联到 DraggableDelegate 对象

    var s=new Scroll({
    node:"#container2"
});

s.attach(dragDelegate);

交换节点位置

当触发 dragover 事件时, 交换当前 DraggableDelegate 的被委托节点与对应 DroppableDelegate 的被委托节点

dragDelegate.on("dragover", function(ev) {
    var drag = ev.drag;
    var drop = ev.drop;
    var dragNode = drag.get("dragNode"),
            dropNode = drop.get("node");
    var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2;
    if (ev.pageX > middleDropX) {
        var next = dropNode.next();
        if (next && next[0] == dragNode[0]) {

        } else {
            dragNode.insertAfter(dropNode);
        }
    } else {
        var prev = dropNode.prev();
        if (prev && prev[0] == dragNode[0]) {
        } else {
            dragNode.insertBefore(dropNode);
        }
    }
});

Navigation