kineticjs模擬jquery可排序

誰可以建議kineticjs插件或腳本與jquery的「可排序」功能？我需要創建一個拖放形狀的列表，並在元件的一次動作等元素在他的位置kineticjs模擬jquery可排序

來源

2013-07-19 axon

嘿，我想kineticjs插件應該正如名稱本身所說的「企業..網絡圖形」一樣。 –

搬到這裏是一個腳本，讓用戶排序列表項的列表動力學通過拖動

之前：下圖顯示了用戶將項目＃1拖到列表的底部。

enter image description here

後：此圖顯示了清單如何新排序順序自動重繪。

enter image description here

每個清單項目的數據內容存儲在項目對象的數組：

如果您需要更多的項目數據，只需將數據添加到列表項的對象

// 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>

來源

2013-07-20 04:14:05 markE

謝謝！很有幫助！ – axon

kineticjs模擬jquery可排序

回答

相關問題