大佬教程收集整理的这篇文章主要介绍了交换后jQuery可拖动项目失去了可拖动性(使用jsfiddle示例),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
任何想法如何解决这一问题? full working jsfiddle here
<html> <head> <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: truE}; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event,ui) { window.setTimeout("Swap()",600); } }); }); function Swap() { $('#one').swapWith($('#two')); //trying to fix problem where elements can't be dragged anymore $("li").draggable("destroy"); $("li").draggable(options); } </script> </head> <body> <form> <ul id="wrapper"> <li id='one'> <div style="width: 100px; height: 100px; border: 1px solid green"> one<br /></div> </li> <li id='two'> <div style="width: 110px; height: 110px; border: 1px solid red"> two<br /></div> </li> </ul> <br /> </form> </body> </html>
看起来可拖动的jqueryui方法正在单独跟踪其对象.克隆时,不会克隆该跟踪.我修改了你的代码如下:
jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true).appendTo($("#wrapper")); var copy_from = $(this).clone(true).appendTo($("#wrapper")); //$(to).replaceWith(copy_from); //$(this).replaceWith(copy_to); }); };
你可以看到http://jsfiddle.net/XkUDv/16/的迷人结果
如您所见,如果拖动新的克隆对象,它将移动原始对象而不是克隆对象.
这不是答案,但我希望它有所帮助.
更新:
仔细看看克隆后我将javascript更改为:
<script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(); var copy_from = $(this).clone(); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true }; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event,ui) { window.setTimeout(function(){ $('#one').swapWith($('#two')); $("li").draggable(options); },600); } }); }); </script>
现在它按照你想要的方式工作:)
我猜测问题是,因为clone(true)复制事件处理程序,当您尝试将draggable重新附加到新克隆时,它会看到旧的事件处理程序并忽略这些元素.所以我没有克隆(true),而是将其更改为clone();
希望有所帮助!
以上是大佬教程为你收集整理的交换后jQuery可拖动项目失去了可拖动性(使用jsfiddle示例)全部内容,希望文章能够帮你解决交换后jQuery可拖动项目失去了可拖动性(使用jsfiddle示例)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。