• DraggableDelegate

引入 kissy.js

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

组织HTML

<div id="container3" 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">
            delegate drag 1
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    <button id="add_delegate">add delegate drag</button>
    <div class="box" >
        <s class="box-tp"><b></b></s>
        <div id="drop" class="box-bd ks-dd">
            drop zone
        </div>
        <s class="box-bt"><b></b></s>
    </div>
</div>

调用DraggableDelegate

KISSY.use("node,dd", function (S, Node, DD) {
    var DDM = DD.DDM,
        DraggableDelegate = DD.DraggableDelegate,
        Droppable = DD.Droppable;
});


通过 use 加载 dd 模块：

.. code-block:: javascript

    KISSY.use("dd",function(S,DD){
        var DraggableDelegate = DD.DraggableDelegate;
    });

得到 :class:`DraggableDelegate` 构造器.

初始化拖放委托对象

• 指明容器以及容器内需要委托的可拖放节点

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

• 生成 Droppable 对象

var drop = new Droppable({
        node:"#drop"
    });

• 监控 Draggable, 拖放后复原 position

var p;
/**
 * 集中监听所有
 */
DDM.on("dragstart", function(ev) {

    var c = ev.drag;
    p = c.get("dragNode").css("position");
});

DDM.on("dragend", function(ev) {
    var c = ev.drag;
    // 恢复原有定位
    c.get("dragNode").css("position", p);
});

• 监控 drophit 事件, 将被委托的节点放入 Droppable 区域

function onhit(ev) {
    ev.drag.get("dragNode").css("margin", "5px 10px");
    ev.drag.get("dragNode").appendTo(ev.drop.get("node"));
}

drop.on("drophit",onhit);