[英]kineticjs analog for jquery sortable
谁可以建议带有jquery的“ sortable”功能的dynamicjs插件或脚本? 我需要使用拖放创建形状列表,并且当其中一个元素移动其他元素移动到他的位置时
这是一个脚本,允许用户通过拖动来对动力学列表中的列表项目进行排序
之前:下图显示了用户将项目#1拖到列表的底部。
之后:此图显示了列表如何以新排序的顺序自动重绘。
每个List-Item的数据内容存储在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.