码迷,mamicode.com
首页 > 编程语言 > 详细

kissy 拖拽排序

时间:2018-12-28 14:34:27      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:new   drag   script   4.0   handlers   lse   targe   selector   dsc   

 

拖拽

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, \njson,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
    });

 

kissy 拖拽排序

标签:new   drag   script   4.0   handlers   lse   targe   selector   dsc   

原文地址:https://www.cnblogs.com/bandbandme/p/10190306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!