Question

我有一个5 x 5的可放置方块网格，然后还有几个可拖动的方块，它们就像链接一样。当它们在网格上的方块之间移动时没有问题，但我也有一个“垃圾”。 droppable square，如果用户删除了一个可拖动的，则将其删除。

我的带有示例拖动的正方形网格看起来像这样 -

<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 .droppable还是#trash都在css中都是相同的大小等。但是，当我拖放垃圾桶时，底层链接有时会弹出。这并不会发生在其他的droppables上，只有垃圾桶就可以了。

我知道启动和停止功能，但我不认为它们会对我产生影响。关于如何阻止链接被解雇的任何想法？

Answer 1

它有助于现代浏览器：

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

Answer 2

试试这个我在猜测

 $('.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');
}

意思是在删除时调用额外的函数

jquery - 当我删除时阻止可拖动的链接打开

2 个答案: