Question

谁能用jquery的“可排序”功能建议kineticjs插件或脚本？我需要用drag'n'drop创建形状列表，当其中一个元素移动其他元素移动到他的位置时

Answer 1

这是一个脚本，允许用户通过拖动对动态列表中的列表项进行排序

之前：下图显示了用户将项目＃1拖到列表底部。

enter image description here

之后：此图显示了列表如何以新排序的顺序自动重绘。

enter image description here

每个List-Item的数据内容存储在一个项目对象数组中：

如果您需要更多商品数据，只需将该数据添加到列表商品对象

即可

    // array of item objects

    var contents = [];

    // item objects contain a text label 
    // and a reference to the Kinetic Group that displays this item

    contents.push( { text: ”I’m list-item#1”,  kItem: KineticGroup#1   } );

用户将列表项拖到新位置后，将使用整个列表。

度假村订单基于列表中每个列表项的“Y”坐标。

代码以新排序的顺序重绘所有列表项。

    // after dragging, list is resorted by the "Y" coordinate of each list-item

    function reorder(){
        contents.sort(compare);
        for(var i=0;i<contents.length;i++){
            contents[i].kItem.setY((i*(itemHeight+itemSpacer))+itemsTopMargin);
        }
        layer.draw();
    }

    // custom compare function that sorts based on Y-coordinates

    function compare(a,b){
        if(a.kItem.getY()<b.kItem.getY()){ return -1; }
        if(a.kItem.getY()>b.kItem.getY()){ return 1; }
        return(0);
    }

用户完成拖动排序后，内容数组按用户的顺序排序

这是代码和小提琴：http://jsfiddle.net/m1erickson/gZWvC/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // list item styling
    var itemsTopMargin=20;
    var itemWidth=100;
    var itemHeight=25;
    var itemX=30;
    var itemSpacer=5;
    var font="verdana";
    var fontsize="16px";

    // list item contents
    var contents=[];
    contents.push({text:"item#0",kItem:null});
    contents.push({text:"item#1",kItem:null});
    contents.push({text:"item#2",kItem:null});
    contents.push({text:"item#3",kItem:null});
    contents.push({text:"item#4",kItem:null});

    // create the list items (kinetic groups)
    for(var i=0;i<contents.length;i++){
        addListItem(contents[i],i);
    }

    // after dragging, resort the list by "Y" coordinate
    function reorder(){
        contents.sort(compare);
        for(var i=0;i<contents.length;i++){
            contents[i].kItem.setY((i*(itemHeight+itemSpacer))+itemsTopMargin);
        }
        layer.draw();
    }

    function compare(a,b){
        if(a.kItem.getY()<b.kItem.getY()){ return -1; }
        if(a.kItem.getY()>b.kItem.getY()){ return 1; }
        return(0);
    }

    // create a new list item
    // a group containing a rect and text
    function addListItem(content,i){

        // group
        // limit dragging to vertical drags only
        var item=new Kinetic.Group({
            x:itemX,
            y:(i*(itemHeight+itemSpacer))+itemsTopMargin,
            width:itemWidth,
            height:itemHeight,
            draggable:true,
            dragBoundFunc:function(pos){
                return({x:itemX,y:pos.y});
            }
        });
        layer.add(item);

        // starting drag -- move dragged item to top z-index
        item.on("dragstart",function(){
            this.moveToTop();
            this.setOpacity(0.50);
        });

        // resort after user drags to desired position
        item.on("dragend",function(){
            this.setOpacity(1.00);
            reorder();
        });

        // the list item rectangle
        var rect=new Kinetic.Rect({
            x:0,
            y:0,
            width:itemWidth,
            height:itemHeight,
            stroke:"skyblue",
            fill:"lightgray"
        });
        item.add(rect);

        // the list item label
        var text=new Kinetic.Text({
            x:10,
            y:6,
            text:content.text,
            fill:"black"
        });
        item.add(text);

        // store the k-group in the content
        content.kItem=item;

        layer.draw();
    }

}); // end $(function(){});

</script>       
</head>

<body>
    <p>Sort by draggging item to new location</p>
    <div id="container"></div>
</body>
</html>

kineticjs模拟用于jquery可排序

1 个答案: