结合prototype自己做的Sortable

shuaigg.babysky

浏览: 571065 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

分享到：