jQuery draggable : 只能在一个 droppable 上拖动

Posted 2023-05-08

【中文标题】jQuery draggable : 只能在一个 droppable 上拖动

【英文标题】：jQuery draggable : draggable drag only on one droppable

【发布时间】：2019-02-27 17:19:44

【问题描述】：

我有一个带有一些可放置和可拖动的应用程序，我想为一种类型的可拖动（具有给定的类）做这种可拖动只能放在一种可放置的类型上。

问题在于它取决于类，在开始时，可​​拖动可以在我的网格中拖动到任何地方：

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

所以我要做的是当我开始拖动我的元素时，我会像这样改变我的网格的接受：

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

但它似乎不起作用，我仍然可以将我的 elem 拖到 grid-drop 上。

我想要做的是这个类的元素只能拖到一个地方，之后就不能再拖一次了，所以这是我的实际代码：

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

当我开始拖动时，我禁用了网格上的拖放（但似乎不起作用），当我拖放到网格之外的另一个字段上时（只有一个其他字段），该元素不能再次拖动。这可行，但网格的禁用和重新启用不起作用。

谁能帮帮我？谢谢。

【问题讨论】：

请提供一个最小、完整且可验证的示例：***.com/help/mcve

【参考方案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;
    
  );
);