<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
</script>
<title>Sortable</title>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript" ></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript" ></script>
</head>
<body>
<style>
#list li {height : 30px;border:1px solid black; width:200px;background-color:white;}
</style>
<ul id="list">
<li node-type="sortitem">1</li>
<li node-type="sortitem">2</li>
<li node-type="sortitem">3</li>
<li node-type="sortitem">4</li>
<li node-type="sortitem">5</li>
<li node-type="sortitem">6</li>
<li node-type="sortitem">7</li>
<li node-type="sortitem">8</li>
<li node-type="sortitem">9</li>
<li node-type="sortitem">10</li>
<li node-type="sortitem">11</li>
<li node-type="sortitem">12</li>
<li node-type="sortitem">13</li>
<li node-type="sortitem">14</li>
<li node-type="sortitem">15</li>
<li node-type="sortitem">16</li>
</ul>
<script>
(function($) {
var parseDOM = function(dom) {
var result = {};
$(dom).select("[node-type]").each(function(item) {
var key = item.readAttribute('node-type');
if(!result[key]) {
result[key] = item;
} else {
if(Object.isArray(result[key])) {
result[key].push(item);
} else {
result[key] = [result[key]];
result[key].push(item);
}
}
});
return result;
};
var sortable = function(dom) {
Element.extend(dom);
var nodes = parseDOM(dom);
nodes.sortitem.each(function(item , i) {
item.store('pos' , item.cumulativeOffset());
item.store('height' , item.getHeight());
item.setStyle('position:relative');
});
var mDownItem , mDownY , curItem;
var findSortItem = function(e) {
var item = e.findElement('[node-type="sortitem"]');
if(item != document) {
return item;
}
return null;
};
var getCurTarget = function(posY) {
var target = null;
nodes.sortitem.each(function(item) {
if(item != mDownItem) {
var pos = item.retrieve('pos');
var height = item.retrieve('height');
var start = pos.top;
var end = start + height;
if(start < posY && posY < end) {
target = item;
throw $break;
}
}
});
return target;
};
var getPointerX = function(e) {
return e.pointerX();
};
var getPointerY = function(e) {
return e.pointerY();
};
var mousedown = function(e) {
e.stop();
var item = findSortItem(e);
if(!item) {
return ;
}
mDownY = getPointerY(e);
mDownItem = item;
Element.extend(mDownItem);
mDownItem.setStyle({zIndex : 10 , cursor : 'move'});
if (mDownItem.setCapture !== undefined) {
mDownItem.setCapture();
}
document.body.onselectstart = function(){return false;};
dom.observe('mousemove' , mousemove);
dom.observe('mouseup' , mouseup);
};
var IsGetThrough = function(targetItem , curItem , dir) {
var targetItemPos = targetItem.cumulativeOffset();
var curItemPos = curItem.retrieve("pos");
var curItemHeight = curItem.retrieve("height");
if(dir === 'down') {
if((curItemHeight - curItemPos.top + targetItemPos.top) / curItemHeight > 0.66) {
return true;
} else {
return false;
}
} else if(dir === 'up') {
if(Math.abs(curItemPos.top - targetItemPos.top) / curItemHeight < 0.33) {
return true;
} else {
return false;
}
}
};
var resetStorePos = function(t1 , t2) {
t1.store('pos' , t1.cumulativeOffset());
t2.store('pos' , t2.cumulativeOffset());
};
var mousemove = function(e) {
if(!mDownItem) {
return;
}
var currY = getPointerY(e);
var y = currY - mDownY;
if(!y) {
return;
}
mDownItem.setStyle({
top : y + 'px'
});
var dir = y > 0 ? 'down' : 'up';
curItem = getCurTarget(currY);
if(!curItem) {
return;
}
Element.extend(curItem);
var through = IsGetThrough(mDownItem , curItem , dir);
if(through) {
mDownY = getPointerY(e);
mDownItem.setStyle({
top : null
});
if(dir === 'down') {
mDownItem.parentNode.insertBefore(curItem , mDownItem);
} else if(dir === 'up') {
mDownItem.parentNode.insertBefore(mDownItem , curItem);
}
resetStorePos(mDownItem , curItem);
}
};
var mouseup = function() {
if (mDownItem.releaseCapture !== undefined) {
mDownItem.releaseCapture();
}
document.body.onselectstart = function(){return true;};
mDownItem.setStyle({
cursor : 'default'
});
mDownY = curItem = null;
dom.stopObserving('mousemove' , mousemove);
dom.stopObserving('mouseup' , mouseup);
mDownItem.morph('top:0px' , {
duration : 0.2,
afterFinish : function() {
mDownItem = null;
}
});
};
dom.observe('mousedown' , mousedown);
};
sortable($('list'));
})(window.$);
</script>
</body>
</html>
分享到:
相关推荐
# Sortable Sortable is a <s>minimalist</s> JavaScript library for reorderable drag-and-drop lists. Demo: http://rubaxa.github.io/Sortable/ ## Features * Supports touch devices and [modern]...
jquery ui sortable 结合jquery ui.core使用
Laravel开发-sortable 处理列排序的包
jquery sortable 拖拽效果 源码
jQuery UI 排序(Sortable)
Jquery Sortable实现div拖动排序效果 Jquery Sortable实现div拖动排序效果
jQuery sortabletable
( Sortable – 简单灵活的 JavaScript 拖放排序插件, ( Sortable – 简单灵活的 JavaScript 拖放排序插件 亲测很好用,修改简单
select2.sortable 结合 select2 和 html5sortable 排序多选择列表真棒!
前端项目-sortable,最简单、最优雅的表格排序方法。
Laravel开发-laravel-sortable Laravel包,用于对雄辩的模型进行排序
html5 拖动排序 html5sortable
classes: {"ui-sortable": "highlight"}, //设置排序元素样式 connectWith: ".distination", //多个排序元素间互相拖拽排序 //containment : "#content1", //排序容器,拖拽不能超出容器范围 //cursorAt : {...
ul class="sortable"> li>Item 1 li>Item 2 li>Item 3 li>Item 4 ul> script src="jquery.sortable.js">script> script> $('.sortable').sortable(); script> API 兼容 jQuery-UI: yepnope({ ...
Laravel开发-eloquent-sortable 雄辩模型的可排序行为
Sortable 是一个JavaScript库,用于在现代浏览器和触摸设备上重新排序拖放列表。不需要jQuery(也支持)。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS库,
jquery sortable图片排列动画菜单分类筛选选项卡切换
最新拖拽排序插件,及简单DEMO
sortable 对form中panel排序