0

ドロップ可能な正方形のグリッド5x5と、のようなリンクであるドラッグ可能な正方形がいくつかあります。グリッド上の正方形の間でそれらを移動する場合、問題はありませんが、ユーザーがドラッグ可能なものをドロップすると削除される「ゴミ箱」のドロップ可能な正方形もあります。

ドラッグ可能な例のある私の正方形のグリッドは次のようになります-

<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内ですべて同じサイズなどです。ただし、ゴミ箱にドラッグアンドドロップすると、基になるリンクが開くことがあります。これは他のドロップ可能オブジェクトでは発生しません。ゴミ箱で発生する可能性があります。

スタート機能とストップ機能については知っていますが、違いはないと思います。リンクの発火を止める方法について何かアイデアはありますか？

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 に答える