通过拖放和jQuery检测位置？

我需要知道如何检测拖动项目的位置而不是其他div。我需要检测一个项目是否被丢弃在两个不同的div之外。（我正在构建一个mac dock类型的开始页面，我需要知道如何做到这一点，所以我可以通过将它们拖出酒吧来删除图标。）通过拖放和jQuery检测位置？

任何帮助将不胜感激。

来源

2010-03-13 Matthew Westrik

你是这样吗？http://www.ajaxplaza.net/dragndrop/dragndrop.htm – jjj 2010-03-14 11:12:53

是的。这就是我的意思，我只是想知道如何检测拖动项是否在两个不同的div中的一个内。 – 2010-03-16 20:06:42

您可以使用jquery ui的draggable和droppable的组合。设置你的工具栏为可拖拽，你的图标可拖动像这样：

var deleteClass = 'deleteMe'; 

$('div.toolbar').droppable({ 
    out:function(event, ui){ 
     ui.draggable.addClass(deleteClass); 
    }, 
    over:function(event,ui){ 
     ui.draggable.removeClass(deleteClass); 
    } 
}); 

$('div.icon').draggable({ 
    helper:'clone', 
    revert:'valid', 
    opacity:.5, 
    stop: function(event,ui){ 
     if($(this).hasClass('deleteMe')){$(this).fadeOut();} 
    }  
});

基本上，工作是在事件。可拖拽工具栏上的遍历和结束事件添加和删除图标上的一个类，我们可以将其用作标志来知道图标何时未在工具栏上。如果图标不在工具栏上，可拖动图标上的停止事件让我们删除该图标。你可以试试this jsFiddle。我相信也可以使用jquery ui sortable小部件完成相同的操作，这样您还可以让用户根据需要重新排列图标。

来源

2010-05-27 20:09:11 AdmSteck

通过拖放和jQuery检测位置？

回答

相关问题