我有以下内容:
我正在尝试将其设置为当您拖动项目时,它只会被删除到您可以看到的div元素,并且不会被覆盖.
所以我使用了这个js:
$(".draggable").draggable({ helper: "clone" }) $("#bottom,.draggable").droppable({ drop: function(event,ui) { var $this = $(this),$dragged = $(ui.draggable); $this.append($dragged.clone()); },hoverClass: "dragHover" })
但它会丢弃两个地方的元素,即使只有一个掉落区域不可见!
我如何修复它以便不会发生这种情况?
小提琴:http://jsfiddle.net/maniator/Wp4LU/
额外的信息,无需小提琴重新创建页面:
HTML:
<div id="top"> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> <div class="draggable"> Lorem ipsum dolor sit amet </div> </div> <div id="bottom"></div>
CSS:
.draggable { border: 1px solid green; background: white; padding: 5px; } .dragHover{ background: blue; } #top { height: 500px; overflow-y: scroll; } #bottom { height: 150px; overflow-y: scroll; border: red solid 4px; }
解决方法
尝试使用accept函数进行设置.
The working demo.
The working demo.
$("#bottom,accept: function () { var $this = $(this),divTop= $("#top"); if ($this.is(".draggable")) { return $this.offset().top < divTop.offset().top + divTop.height() ; } return true; },hoverClass: "dragHover" });
原文地址:https://www.jb51.cc/js/156904.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。