拖拽

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>

 

     
                                  <{foreach from=$datas item=data}>                                                    
      
                                
       <{$data.ue}> 点评产品： <{$data.pe}>                                
       
<{$data.desc}>
                            
      
                            <{/foreach}>                            
      
                                
       
        
       
                            
      
                        
     

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    });