kissy 拖拽排序

 

拖拽

html:

<link rel="stylesheet" href="http://wwwcdn.kimiss.net/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://wwwcdn.kimiss.net/public/bootstrap/font-awesome-4.0.3/css/font-awesome.css">
<script src="http://kissy.kimiss.net/k/??kissy/1.4.0/seed-min.js,cfg-min.js?t=1384946820" data-config="{combine:true}" charset="utf-8"></script>

 

<div id="dataBox">
                            <{foreach from=$datas item=data}>                        
                            <div class="dataUnit" data-id="<{$data.cd}>">
                                <label class="selector"><{$data.ue}> 点评产品： <{$data.pe}></label>
                                <p><a href="<{$data.url}>" target="_blank"><{$data.desc}></a></p>
                            </div>
                            <{/foreach}>
                            <div class="dataUnit" style="border:0px;">
                                <div><p></p></div>
                            </div>
                        </div>

js

KISSY.use('node, io, gallery/formSubmitBtn/1.0/formSubmitBtn, \n\
json,dd,dd/plugin/proxy,dd/plugin/scroll', function(S, Node, IO, FormSubmitBtn, JSON, DD, DDProxy, DDScroll) {
        var $ = KISSY.all, DOM = KISSY.DOM;
        dataDraggable();
// 数据可托拽
        function dataDraggable() {
            var DDM = DD.DDM,
                    DraggableDelegate = DD.DraggableDelegate,
                    DroppableDelegate = DD.DroppableDelegate,
                    Draggable = DD.Draggable,
                    Droppable = DD.Droppable;
            var dragDelegate = new DraggableDelegate({
                container: "#dataBox",
                handlers: ['.selector'],
                selector: '.dataUnit',
                move: true,
                plugins: [
                    new DDProxy({
                        /**
                         * 如何产生替代节点
                         * @param drag 当前拖对象
                         */
                        node: function(drag) {
                            var n = S.one(drag.get("dragNode")[0].cloneNode());
                            n.removeAttr('id');
                            n.css("opacity", 0.8);
                            return n;
                        },
                        // 主体位置不跟随 proxy
                        moveOnEnd: false,
                        // 每次 proxy 都重新生成
                        destroyOnEnd: true
                    }),
                    new DDScroll({
                        node: "#dataBox"
                    })
                ]
            });
            var dropDelegate = new DroppableDelegate({
                container: "#dataBox",
                selector: '.dataUnit'
            });
            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);
                    }
                }
            });
        }
        // 产品可托拽 end
    });