portal 示例

portal 示例

代码

KISSY.use("dd,node,dd/plugin/scroll,dd/plugin/proxy", function (S, DD, Node,Scroll,Proxy) {


    var $ = Node.all,
        DraggableDelegate = DD.DraggableDelegate,
        DroppableDelegate = DD.DroppableDelegate;

    var dragDelegate = new DraggableDelegate({
        container:"#cols",
        move:1,
        handlers:['.header'],
        selector:function (el) {
            el = $(el);
            return el.hasClass('col') || el.hasClass('component');
        },

        plugins:[
            new Proxy({
                /**
                 * 如何产生替代节点
                 * @param drag 当前拖对象
                 */
                node:function (drag) {
                    var n = drag.get("dragNode").clone();
                    n.removeAttr('id');
                    n.css("opacity", 0.2);
                    return n;
                },
                moveOnEnd:false,
                destroyOnEnd:true
            })
        ]
    });

    /**
     * 一列也为可拖放节点,防止空列无法拖入
     */
    new DroppableDelegate({
        container:"#cols",
        selector:'.col'
    });

    /**
     * 单个 component 为可拖放节点
     */
    new DroppableDelegate({
        container:"#cols",
        selector:'.component'
    });

    dragDelegate.on("dragover", function (ev) {
        var drag = ev.drag;
        var drop = ev.drop;
        var dragNode = drag.get("dragNode"),
            dropNode = drop.get("node");


        if (dragNode.hasClass("component")) {

            if (dropNode.hasClass("col")) {
                var nodes = dropNode.all(".component");

                if (nodes.length) {

                    if (nodes.length == 1 &&

                        ( nodes[0] === drag.get("node")[0] &&
                            nodes[0] !== drag.get("dragNode")[0])

                        ) {
                        // 只有 proxy
                    } else {
                        return;
                    }
                }

                // S.log("添加到列");

                //空列
                dropNode.append(dragNode);
            } else {

                // 纵轴中线位置
                var middleDropY = (dropNode.offset().top * 2 + dropNode.height()) / 2;

                //当前鼠标位置
                if (ev.pageY > middleDropY) {
                    var next = dropNode.next();
                    if (next && next[0] == dragNode) {
                    } else {
                        dragNode.insertAfter(dropNode);
                    }
                } else {
                    var prev = dropNode.prev();
                    if (prev && prev[0] == dragNode) {
                    } else {
                        dragNode.insertBefore(dropNode);
                    }
                }
            }
        }
        // 列之间拖动
        else if (dropNode.hasClass("col")) {

            // 横轴中线位置
            var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2;

            //当前鼠标位置
            if (ev.pageX > middleDropX) {
                next = dropNode.next();
                if (next && next[0] == dragNode) {
                } else {
                    dragNode.insertAfter(dropNode);
                }
            } else {
                prev = dropNode.prev();
                if (prev && prev[0] == dragNode) {
                } else {
                    dragNode.insertBefore(dropNode);
                }
            }
        }
    });
});