我对
jQuery UI的可卸载组件有一个小问题,但是由于我的代码或组件中的错误,我是否确定是否有问题.
我有一个宽度和高度固定的div.该div的overflow-x设置为hidden,overflow-y设置为auto.
在那个div里面我有更多的div.这么多的外部div开始滚动.每个内部div都是一个可下载的,接受一个在包装器div之外的draggable.
如果我拖&将draggable项目放在包装器中的某处,一切正常.问题是如果我将元素放在包装器div的下面,那么drop事件会被触发.
我不太善于解释问题;因此这里有一些代码重现问题：
只需拖放“拖我！”容器下面的div与滚动条.意外的是,您会看到警报“丢弃”.
现在有趣的是：如果您向下滚动到“Test28”项目,现在您将draggable拖放到包装器下方,则drop事件不会被触发.看起来隐藏的元素仍然可以访问,当你放下他们的东西.
解决方法
检查droppable元素对父容器的限制,如果droppable的底部位于父级顶部或droppable的顶部位于父级底部之下,则会破坏函数的执行：
$('.item').droppable( {
activeClass: "ui-state-default",hoverClass: "ui-state-hover",accept: "#draggable",drop: function( event,ui ) {
var cTop = $(this).closest(".Box").position().top + parseInt($(this).closest(".Box").css("margin-top"));
var cBtm = $(this).closest(".Box").position().top + parseInt($(this).closest(".Box").css("margin-top")) + $(this).closest(".Box").height();
var dTop = $(this).position().top + parseInt($(this).css("margin-top"));
var dBtm = $(this).position().top + parseInt($(this).css("margin-top")) + $(this).height()
if (dBtm > cTop && dTop < cBtm) {
alert("Dropped.");
}
}
});
示例：http://jsfiddle.net/lthibodeaux/2p56Y/6/
我意识到它不优雅,但似乎可行.我承认只是粗略地测试这个脚本.
