0

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

我知道启动和停止功能，但我认为它们对我没有影响。关于如何阻止链接触发的任何想法？

4

2 回答 2

2

它有助于现代浏览器：

.ui-draggable-dragging {
  pointer-events: none;
}
于 2014-06-23T15:46:42.860 回答
0

试试这个我猜

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

意思是当它被丢弃时只调用一个额外的函数

于 2013-03-08T22:58:10.333 回答