zoukankan      html  css  js  c++  java
  • 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, 
    
    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
        });
  • 相关阅读:
    目录创建用什么命令?创建文件用什么命令?复制文件用什 么命令?
    哪些浏览器支持HTML 5?
    终端是哪个文件夹下的哪个文件?黑洞文件是哪个文件夹下 的哪个命令?
    什么是端到端微服务测试?
    HTML 5中的本地存储概念?
    HTML 5的页面结构和HTML 4或早先的HTML有什么不同?
    Spring 切面可以应用五种类型的通知?
    Math.round(11.5) 等于多少?Math.round(-11.5)等于多少?
    微服务架构如何运作?
    双因素身份验证的凭据类型有哪些?
  • 原文地址:https://www.cnblogs.com/bandbandme/p/10190306.html
Copyright © 2011-2022 走看看