jQuery draggable：只能在一個droppable上拖動

Question

我有一個帶有一些droppable和draggable的應用程序，我想對一種類型的draggable（具有給定的類）進行操作，這種draggable只能放在一種類型的droppable上。

問題是它取決於類，在開始時可拖動對象可以在網格中的任何地方拖動：

 $('.grid-drop').droppable({
        accept: '.block',
        hoverClass: 'hovered',
        drop: handlePublishBlock
 });

所以我要做的是，當我開始拖動元素時，就這樣改變了網格的接受度：

$('.grid-drop').droppable({
       accept: '.unknown-class',
       hoverClass: 'hovered',
       drop: handlePublishBlock
});

但似乎不起作用，我仍然可以將我的元素拖到網格上。

我想要做的是將此類的元素只能拖到一滴，然后再拖一次，所以這是我的實際代碼：

 $(".draggable-one")
        .mousedown(function() {
            $('.grid-drop').droppable({
                accept: '.unknown-class',
                hoverClass: 'hovered',
                drop: handlePublishBlock
            });

            console.log("mousedown");
            isDragging = false;
        })
        .mousemove(function() {
            console.log("mousemove");
            isDragging = true;
        })
        .mouseup(function() {
            console.log("mouseup");
            var wasDragging = isDragging;
            isDragging = false;
            if (wasDragging) {

                $('.grid-drop').droppable({
                    accept: '.block',
                    hoverClass: 'hovered',
                    drop: handlePublishBlock
                });


                $(this).draggable('disable');
                $(this).removeClass('block-draggable');
            }
        });

當我開始拖動時，我禁用了在網格上的拖放（但似乎不起作用），並且當我在網格以外的其他字段（只有一個其他字段）上拖放時，該元素無法再次拖動。 這可以工作，但是禁用和重新啟用網格不起作用。

誰能幫我 ？ 謝謝。

Answer 1

如果沒有完整的代碼，很難提供幫助。 我建議這樣的事情：

$(function(){
  var $grid = $('.grid-drop').droppable({
    accept: '.block',
    hoverClass: 'hovered',
    drop: handlePublishBlock
  });
  var isDragging = false;
  $(".draggable-one").draggable({
    start: function(e, ui){
      $grid.droppable("option", "accept", ".draggable-one");
      console.log(e.type);
      isDragging = true;
    },
    stop: function(e, ui){
      $grid.droppable("option", "accept", ".block");
      console.log(e.type);
      isDragging = false;
    }
  });
});