Question

我需要知道如何检测拖动项目的位置而不是其他div。我需要检测一个项目是否被丢弃在两个不同的div之外。（我正在构建一个mac dock类型的起始页面，我需要知道如何执行此操作，以便我可以通过将它们拖出栏来删除图标。）

非常感谢任何帮助。

Answer 1

您可以使用jquery ui中draggable和droppable的组合。将工具栏设置为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小部件也可以完成相同的操作，因此您也可以让用户根据需要重新排列图标。

使用拖放和jQuery检测位置？

1 个答案: