Question

jquery实现拖拽tr

<script language="javascript">var beginMoving=false;//鼠标按下操作事件function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture();}//鼠标拖动操作事件function MouseMoveToMove(obj){ if(!beginMoving) return false; obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX);}//鼠标松开操作事件function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; var tempTop=event.clientY-obj.mouseDownY; var tempRowIndex=(tempTop-tempTop%25)/25; if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1; else tempRowIndex=tempRowIndex+obj.rowIndex; if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1; obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);}</script>
1从网上看到这个效果，就是拖拽tr时，可以像拖动层似的随意拖动位置，调用方法如上，
然后每个tr里面属性设置style="cursor:move ;position:relative;"就能实现如上效果了
2我用jquery加载数据，然后动态生成tr td，也加上以上属性了，但是只能上下拖拽，不能实现像上面那种拖动层的样式，求解释，代码如下
$.each(productData,function(i,n){ var trs=""; trs += "<tr style=\"cursor:move;position:relative;\" onmousedown=\"MouseDownToMove(this)\" onmousemove=\"MouseMoveToMove(this)\" onmouseup=\"MouseUpToMove(this);\"><td>" + n.id + "</td><td>" + n.name + "</td><td>" + n.sex + "</td><td>" + n.tel + "</td><td>" + n.address + "</td></tr>"; tbody += trs; });

问：为什么代码一样，效果不同
或者
如果方便，求一个比较好看的拖拽的实例，不要使用用插件的

Answer 1

案例和插件没什么区别吧，jquery UI里面 整合一下就好了

追问

嗯嗯，主要是看那东东还得用对应的jquery版本貌似，麻烦，而且改起来不好改，看来只能用那个了，谢谢