jquery sortable 希望有人帮我解决最后一个问题！
0
悬赏园豆：100
[已解决问题]
解决于 2012-12-28 14:46
各位大神，我现在用jquery的sortable插件，能实现div拖拽了已经，但是我还有个问题在参阅众多资料之后仍然无法解决，故再次补充此问题，希望大神能帮我一下！
问题： 在拖拽释放的stop:function(){ 如何在该释放方法里面获得被拖拽层里面的某个元素 }？
例如我现在是div1 div2
<div id="div1" >这里是div1，里面有个input隐藏域hidden ，存储一个data1</div>
<div id="div2" >这里是div2，里面有个input隐藏域hidden ，存储一个data2</div>
当我把div1 sortable 拖拽至div2的位置时，如何在stop事件中查找到该被覆盖的div2对象，然后找到其下的hidden元素呢？
谢谢各位！
最佳答案
0
$(function () {
$("#Sortable").sortable({
stop: SaveLayout
});
});
function SaveLayout() {
var list = "";
var i = 1;
//循环样式读取
$.each($(".ui-state-default"), function (m) {
var id = $(this).attr('id');
list += id + ":" + i;
i++;
list += "|";
});
alert(list);
}
收获园豆：100
感谢你的回答，你的这种办法确实也是一种方案，但是如果我div特别多时，这样拖拽结束后完全重新按照现有的排序提交到服务器端进行更新的话，是不是感觉有点浪费资源了，难道真的没有办法再捕获到被拖拽替换的div目标元素吗？，如果能找到，就仅仅是ajax至服务器端交换掉拖拽层与目标拖拽层的排序就够了对吧
@流年岁月里:
你可以先记录原有的位置，再根据新位置在客户端把替换的两个位置找出来，再传给服务器
@Rich.T: 嗯，这也是一种方法。客户端记录拖拽前与拖拽后的排序数组，然后循环比对，如果一样就不更新，不一样的话就提交至服务器进行更新，是这个思路吧
@流年岁月里:
是的，你好聪明 ：）
@Rich.T: 咋感觉是在笑话我呢，呵呵。
@Rich.T: 感觉你咋是在笑话我呢 呵呵 小弟不才！
@流年岁月里:
没有，我的意思是你理解的是对的
@Rich.T: 感谢你的回复，谢谢了！
其他回答(2)
0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.5.1.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script> <link rel="stylesheet" href="../demos.css"> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> var $node; var oldNodeSort = new Array(); $(function() { $("#sortable>li").each(function(){ oldNodeSort.push($(this).html()); }); $( "#sortable" ).sortable({ stop:function(event,ui) { var newNodeSort=new Array(); $("#sortable>li").each(function(){ newNodeSort.push($(this).html()); }); var oldIndex,newIndex,str=""; for(var i=0;i<newNodeSort.length;i++) { if(newNodeSort[i]==$(ui.item.context).html()) { newIndex=i; break; } } for(var j=0;j<oldNodeSort.length;j++) { if(oldNodeSort[j]==$(ui.item.context).html()) { oldIndex=j; break; } } if(oldIndex<newIndex) { str=newNodeSort[newIndex-1]; } if(oldIndex>newIndex) { str=newNodeSort[newIndex+1]; } alert(str); oldNodeSort.length=0; oldNodeSort=newNodeSort; $("#sortable>li").each(function(){ if($(this).html()==str) { $node = $(this); } }); //alert($node.html()); } }); $( "#sortable" ).disableSelection(); }); </script> </head> <body> <div class="demo"> <ul id="sortable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> </ul> </div><!-- End demo --> <div class="demo-description"> <p> Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties. </p> </div><!-- End demo-description --> </body> </html>
0
我也碰到了同样的问题 请问你是如何解决的？
