`
enix2212
  • 浏览: 24126 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
sp42
社区版块
存档分类
最新评论

拖拽排序列表单例

javascript drap 
阅读更多 
<!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" />
<title>sortlist</title>
<style type="text/css">
ol{ list-style: url(none) none; }
li{ width: 200px; height: 30px; margin-bottom: 5px; color: #000; text-indent: 25px; font: bold 14px/30px Arial, Helvetica, sans-serif; background: #EEE; border: 1px solid #ccc; border-ridus:5px; border-radius:25px; box-shadow: 4px 5px #fff inset; }
</style>
</head>

<body>
<ol id="list">
  <li>
	1
  </li>
  <li>
    2
  </li>
  <li>
    3
  </li>
  <li>
    4
  </li>
  <li>
    5
  </li>
  <li>
    6
  </li>
</ol>
<script type="text/javascript">
delete function(e,c){var f=document,l=null,b=null,h=[0,0],g=null,m=null,j={getEvent:function(n){return n||e.event},getTarget:function(n){return n.srcElement||n.target},stopEvent:function(n){n=j.getEvent(n);(n.returnValue||n.preventDefault)&&(n.returnValue=false||n.preventDefault());(n.cancelBubble||n.stopPropagation)&&(n.cancelBubble=false||n.stopPropagation())},getClinetRect:function(n){var p=n.getBoundingClientRect(),o=(o={left:p.left,right:p.right,top:p.top,bottom:p.bottom,height:(p.height?p.height:(p.bottom-p.top)),width:(p.width?p.width:(p.right-p.left))});return o},getScrollPosition:function(){var n=[0,0];e.pageYOffset?(n=[e.pageXOffset,e.pageYOffset]):(n=[document.documentElement.scrollLeft,document.documentElement.scrollTop]);return n},addEvent:function(r,q,p,o){var n=arguments.callee;r.attachEvent&&(n=function(u,t,s){u.attachEvent("on"+t,s)}).apply(this,arguments);r.addEventListener&&(n=function(u,t,s){u.addEventListener(t,s,o||false)}).apply(this,arguments);r["on"+q]&&(n=function(u,t,s){u["on"+t]=function(){s()}}).apply(this,arguments)},removeEvent:function(r,q,p,o){var n=arguments.callee;r.detachEvent&&(n=function(u,t,s){u.detachEvent("on"+t,s)}).apply(this,arguments);r.removeEventListener&&(n=function(u,t,s){u.removeEventListener(t,s,o||false)}).apply(this,arguments);r["on"+q]&&(n=function(u,t,s){u["on"+t]=null}).apply(this,arguments)}};function a(o){o=j.getEvent(o);var n=j.getTarget(o),p=null;while(n.nodeName.toLowerCase()!==m){n=n.parentNode}f.currentTarget=n,p=j.getClinetRect(n),h=[o.clientX-p.left,o.clientY-p.top];j.addEvent(f,"mousemove",i,false);j.addEvent(f,"mouseup",d,false);j.stopEvent(o)}function k(p,o,n){!b&&(b=p.cloneNode(true),b.style.cssText="border:dashed 2px red;height:"+(p.offsetHeight-4)+"px;width:"+(p.offsetWidth-4)+"px;background:#EEE;",b.innerHTML="\u653e\u5728\u8fd9\u91cc\uff1f");(n===-1)&&o.parentNode.insertBefore(b,o);(n===1)&&o.parentNode.insertBefore(b,o.nextSibling)}function i(q){q=j.getEvent(q);var p=f.currentTarget,o=l.length,r=null,n=j.getScrollPosition();try{p.style.cssText="top:"+(q.clientY-h[1]+n[1])+'px;position:absolute;z-index:100;opacity:.9;filter:alpha(opacity="90")'}catch(q){}for(;o>0;){l[--o]!==p&&(r=j.getClinetRect(l[o]),((q.clientY>=r.top)&&(q.clientY<r.bottom))&&(k(p,l[o],q.clientY<=(r.top+l[o].offsetHeight/2)?-1:1)))}}function d(n){try{f.currentTarget.style.cssText="";b.parentNode.replaceChild(f.currentTarget,b)}catch(n){}j.removeEvent(f,"mousemove",i,false);j.removeEvent(f,"mouseup",d,false);f.currentTarget=null,b=null;j.stopEvent(n)}return function(o){g=o.parent,m=o.tag||"li";if(!f.getElementById(g)){return false}l=f.getElementById(g).getElementsByTagName(m);var n=l.length;for(;n>0;j.addEvent(l[--n],"mousedown",a,false),l[n].style.cursor="move"){}}}(window)({parent:"list",tag:"li"});

//拖拽排序列表单例 
</script>
</body>
</html>
分享到：
| Animate Baseclass
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics