基本上我想要的是,在拖动时,如果我走出包含区域并在那里释放鼠标单击,可拖动元素只会粘在我离开包含区域的边框上。当我将光标移回时,元素会粘回光标。当您只是移动光标(不拖动)并且元素仍在拖动时,它看起来并不好。
这是一个可以玩的小提琴。只需将光标拖到输出区域之外,您就会明白我在说什么。
我在想两种方法
-
拖动时将鼠标移动到包含区域(我搜索了它,但没有找到如何做。梅布那不可能吗?
-
如果光标离开包含区域,请将可拖动对象恢复到其位置。(仍然找不到执行此操作的方法)
任何方法或更聪明的想法来实现这个???
Relevant Code
(用于堆栈溢出)
这是因为它在iframe中。这就像拖到浏览器之外一样。鼠标向上事件不会在页面中注册。
看起来chrome不允许这样做,但Firefox允许。
试试这个:小提琴
$('body').mouseleave(function()
{
$(document).trigger("mouseup");
});
这是您的解决方案,无需每次都设置事件。
矫枉过正的版本(这将允许用户暂时(1秒)离开iframe并返回而不会丢失阻力):
$('body').prop('mouseuptimer',null)
.mouseleave(function()
{
var objTimer = setTimeout(function()
{
$(document).trigger("mouseup")
}, 1000);
$(document).prop('mouseuptimer', objTimer);
})
.mouseenter(function()
{
var objTimer = $(document).prop('mouseuptimer');
if (objTimer) clearTimeout(objTimer);
});
$(function()
{
$( "#sortable" ).sortable({revert: true });
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid" });
$( "ul, li" ).disableSelection();
});
编辑:
回答您的第一个问题:
您可以通过在选项中添加"包含"来包含可拖动的内容,即:
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid",
containment: "document" });
但这只能包含拖动到边界框的元素(在本例中为"文档",但它也可以是"父"或"#somediv")。鼠标光标仍然可以移动到 iframe 之外的任何位置,并从那里调度事件,超出 iframe 文档的范围。
好的,我找到了解决方法。适用于IE8和Chrome。
为可拖动元素添加了此代码。
drag: function(){
$('body').mouseleave(function(){
$('body').mouseup();
});
}
工作小提琴
编辑:感谢Rembunator指出该缺陷,我决定使用.one()以获得更好的性能,并将代码从拖动转移到开始
start: function(){
$('body').one("mouseleave", function(){
$('body').mouseup();
});
}
编辑2:
终于找到了解决方案。
这是代码:
var flag=true;
start: function( event, ui ){
if(flag){
flag = false;
$('body').one("mouseleave", function(){
$('body').mouseup();
flag = true; //event occured, rebind
});
}
else{
flag = false;
}
}
感谢Rembunator的帮助