大佬教程收集整理的这篇文章主要介绍了jquery – 如何从可滚动的div拖动到droppable然后再拖动?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
显示问题的简化代码如下所示 – 您应该能够剪切并粘贴到页面并放入您的webroot进行测试.提前致谢.
<!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> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> <script> $(document).ready(function() { var dropped = false; $(".container").droppable({ drop: function(event,ui) { dropped = true; $.ui.ddmanager.current.cancelHelperRemoval = true; ui.helper.appendTo(this); } }); $(".item").draggable({ revert: 'invalid',helper: function(){ $copy = $(this).clone(); return $copy; },start: function(event,ui) { dropped = false; $(this).addClass("hide"); },stop: function(event,ui) { if (dropped==true) { $(this).remove(); } else { $(this).removeClass("hide"); } } }); }); </script> <style> .scrollable { margin-top:5px; float:left; height:140px; width:60px; overflow:auto; } .container { height: 140px; width: 160px; float:left; border:3px solid black; margin:5px; } .item { float:left; height:40px; width:40px; } .red {background-color: red; } .black {background-color: black;color: white;} .green {background-color: green;} .blue {background-color: blue; color: white;} .yellow {background-color: yellow;} </style> </head> <body> <div id="list" class="scrollable"> <div id="p1" class="item red">A</div> <div id="p2" class="item black">B</div> <div id="p3" class="item green">C</div> <div id="p4" class="item blue">D</div> <div id="p5" class="item yellow">E</div> </div> <div> <div id="c1" class="container"></div> <div id="c2" class="container"></div> <div id="c3" class="container"></div> </div> </body>
stop: function(event,ui) { if (dropped==true) { $(this).remove(); } else { $(this).removeClass("hide"); } $('#'+$(this).attr('id')).draggable({revert: 'invalid'}); }
当克隆拖动元素时,它会保留“ui-draggable”类,但这还不足以使其可拖动.必须反弹.
以上是大佬教程为你收集整理的jquery – 如何从可滚动的div拖动到droppable然后再拖动?全部内容,希望文章能够帮你解决jquery – 如何从可滚动的div拖动到droppable然后再拖动?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。