防止可拖动链接在我放下它时打开

prevent a draggable link from opening when I drop it

本文关键字：放下 拖动 链接      更新时间：2023-09-26

我有一个5 × 5的可拖放正方形网格，然后还有几个可拖放的正方形，就像链接一样。当它们在网格上的方块之间移动时，没有问题，但我也有一个"垃圾"可拖放方块，如果用户在上面放一个可拖放方块，它就会被删除。

我的正方形网格和一个可拖拽的例子看起来像这样- 

<div id="-2:-2" class="droppable"></div>
<div id="-2:-1" class="droppable occupied">
    <a href="http://stackexchange.com" id ="20" class="bookmark draggable black" title="black" target="_blank"></a>
</div>
<div id="-2:0" class="droppable"></div>
<div id="-2:1" class="droppable"></div>

在页面的其他地方我有垃圾桶项- 

<div>Delete me<div id="trash"></div></div>
然后是javascript - 
$('.draggable').draggable({ start: function() {$('#dropdownAddTile').slideDown();},  stop: function() {$('#dropdownAddTile').slideUp();}, containment: '#container', snap:'.droppable, #trash', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
$('#trash').droppable({drop: removelink, accept: '.draggable'});
function removelink(event, ui) {
    var draggableId = ui.draggable.attr("id");
    $(ui.draggable).remove();   
    $.post("tiles/delete", { draggableId:draggableId }).done(function(data) {
        //alert(data);
    })
    $('#dropdownAddTile').slideUp();
}

所有的正方形，无论是。draggable。dropable还是#trash，在css中都是相同大小的。然而，当我拖放垃圾桶时，底层链接有时会弹出。这种情况不会发生在其他可丢弃物品上，只有垃圾桶上的那个。

我知道启动和停止功能，但我不认为它们对我有什么不同。有谁知道如何阻止链接发射吗?

对现代浏览器有帮助:

.ui-draggable-dragging {
  pointer-events: none;
}

试试这个，我猜

 $('.droppable').droppable({drop: function () {
 handleDropEvent();
 removelink($(this).find('a'))
 }, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied'))      {return true; }}}

function removelink(obj) {
 obj.removeAttr('href');
}

意思是当它被放下时调用一个额外的函数

相关文章：