Jquery UI Droppable revert不能再次删除

Posted 2023-05-08

【中文标题】Jquery UI Droppable revert不能再次删除

【英文标题】：Jquery UI Droppable revert cannot drop again

【发布时间】：2020-02-29 09:29:52

【问题描述】：

我一直在尝试为单词学习应用程序创建拖放系统，但在我恢复并尝试再次拖动它们后遇到了可拖动元素无法重复使用的问题。

为了恢复可拖动对象，我使用了 out 方法，这样当您将其拖出可放置区域时，它会恢复到之前的位置。 我通过删除可拖动实例并将其重新添加来做到这一点，如果我尝试将相同的元素拖回可放置区域，它将无法放置。我已经尝试重新初始化可放置区域进行测试，但这似乎并没有改变任何东西。

$(document).ready(function () 
  createDraggable();
  createDroppable();
);

function createDraggable()
  $(".word").draggable(
    containment: ".stage",
    revert: 'invalid',
    revertDuration: 0
  );


function disableOtherDraggable(except)
  $(".word:not(#" + except.attr('id') + ")").draggable('disable');


function createDroppable()
  $('.drop').droppable(
    tolerance: 'touch',
    accept: '.word',
    drop: function(event, ui) 
      ui.draggable.position(
        my: "center",
        at: "center",
        of: $(this),
        using: function(pos) 
          $(this).animate(pos, 200, "linear");
        
      );
      $(ui.draggable).css('background', "transparent");
      disableOtherDraggable(ui.draggable);
    ,
    out: function(event, ui) 
      ui.draggable.mouseup(function () 
        ui.draggable.removeAttr('style');
        $(".word").draggable("destroy");
        createDraggable();
      );
    
  );

我希望能够让人们放下单词并在需要时将它们拖回来。完成这项工作后，我将设置一个按钮来检查删除的单词是否正确。

这个例子有4个词可以拖，但范围可以从3到5

更新

这是我为任何感兴趣的人工作的更新代码。我将舞台创建为可放置区域，并根据需要打开和关闭它。

$(function() 
  function createDraggable(o) 
    o.draggable(
      containment: ".stage",
      revert: 'invalid',
      revertDuration: 0
    );
  

  function toggleOtherDraggable() 
    $(".words .word").each(function(i, val)
     if(!$(val).hasClass('ui-dropped')) $(val).draggable('disable');
    );
  

  function createLineDroppable()
    $('.drop').droppable(
      tolerance: 'touch',
      accept: '.word',
      drop: function(event, ui) 
        ui.draggable.position(
          my: "center",
          at: "center",
          of: $(this),
          using: function(pos) 
            $(this).animate(pos, 200, "linear");
          
        );
        $(ui.draggable).css('background', 'transparent');
        $(ui.draggable).addClass('ui-dropped');
        toggleOtherDraggable();
      ,
      out: function()
        $('#stage-drop').droppable('enable');
      
    );
  

  function createStageDroppable() 
    $('#stage-drop').droppable(
      tolerance: 'touch',
      accept: '.word',
      disabled: true,
      drop: function(event, ui) 
        $(ui.draggable).css('left', '0');
        $(ui.draggable).css('top', '0');
        $(ui.draggable).css('background', '');
        $(ui.draggable).removeClass('ui-dropped');
        $('#stage-drop').droppable('disable');
        $(".words .word").draggable('enable');
      
    );
  

  createDraggable($(".words .word"));
  createLineDroppable();
  createStageDroppable();
);

【问题讨论】：

我觉得这可能与 revert: 'invalid' 有关。当我第二次尝试删除它时，它可能会认为该词无效，只是不确定为什么类没有改变，所以它仍然应该接受它。

你也可以显示你的 html 代码吗？

欢迎来到 Stack Overflow。我没有看到 drpped 项目附加到新空间的位置。我怀疑您的禁用功能过于贪婪并且禁用太多，因为丢弃的项目不在应有的位置。

【参考方案1】：

您需要一个放置 .word 的位置，一个是您要禁用其他的位置，一个是返回的位置。

考虑以下示例：

$(function() 
  function createDraggable(o) 
    o.draggable(
      containment: ".stage"
    );
  

  function toggleOtherDraggable() 
    if ($(".words .word").eq(0).hasClass("ui-draggable-disabled")) 
      $(".words .word").draggable('enable');
     else 
      $(".words .word").draggable('disable');
    
  

  function createDropWord() 
    $(".words").droppable(
      tolerance: 'touch',
      accept: '.word',
      drop: function(event, ui) 
        var item = ui.draggable;
        item.removeAttr("style");
        $(this).append(item);
      
    );
  

  function createDropStage() 
    $('.drop').droppable(
      tolerance: 'touch',
      accept: '.word',
      drop: function(event, ui) 
        var item = ui.draggable;
        item.appendTo(this).position(
          my: "center",
          at: "center",
          of: $(this),
          using: function(pos) 
            $(this).animate(pos, 200, "linear");
          
        ).css('background', "transparent");
        toggleOtherDraggable();
        createDropWord()
      ,
      out: function() 
        toggleOtherDraggable();
      
    );
  

  createDraggable($(".words > .word"));
  createDropStage();
);

.word 
  display: inline-block;
  padding: .25em;


.drop 
  width: 340px;
  height: 100px;
  background: #CCC;
  margin: 20px;


.word.ui-draggable-disabled 
  opacity: 0.45;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="stage">
  <div class="ui-widget words">
    <div id="word-1" class="word ui-widget-content">Word 1</div>
    <div id="word-2" class="word ui-widget-content">Word 2</div>
    <div id="word-3" class="word ui-widget-content">Word 3</div>
    <div id="word-4" class="word ui-widget-content">Word 4</div>
  </div>
  <div class="drop"></div>
</div>

当您第一次拖放到.drop 区域时，这会将放置的对象居中并同时禁用其他可拖动对象，因此它们不能被拖入。当项目被拖出时，它们会重新启用。

您必须使用.append() 或.appendTo() 以便将丢弃的项目添加到容器中。这适用于这两个元素。

revert 选项仅在特定丢弃情况下启用。如果 droppable 不接受该项目或返回 false，则当 invalid 是首选时，该项目将被还原。

【讨论】：

我使用了让舞台可放置的想法，将单词放回原来的位置。移动 drop 时我没有追加，因为它让我的 dom 奇怪地跳来跳去。我已将更新后的代码添加到我的问题中，供其他寻找信息的人使用。