Question

这就是我所拥有的。现在，当拖放可拖动项目时，它仍然可以移动（拖动）并重新定位。我想禁用每个可拖动项目，一旦将其删除。

这就是我所拥有的

  $( function() {
    $(".drag").draggable({
    stack: ".drag",
    stop: function() {
      let next = $(this).data('index') + 1;
      $('div[data-index="' + next + '"]').show();
    }
  });
    $( ".droppable" ).droppable({
     tolerance: "touch",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
      }
    });
  } );

我的可拖动物品示例

<div id="drag1" data-index="1" class="drag" style="left:10px;top:20px;background-color:orange">Draggable 1</div>

<div id="drag2" data-index="2" class="drag" style="left:10px;top:20px;background-color:lightblue; display: none;">Draggable 2</div>

<div id="drag3" data-index="3" class="drag" style="left:10px;top:20px;background-color:lightblue; display: none;">Draggable 3</div>

感谢您的帮助。

Answer 1

当拖放可拖动元素时，只需使用以下代码即可禁用其可拖动性

ui.draggable.draggable（{disabled：true}）;

Js Fiddle Demo Here

$( "#droppable" ).droppable({
 tolerance: "touch",
  drop: function( event, ui ) {
      //debugger;
      //var dragId = ui.draggable.attr("id");
      //$("#"+dragId).removeClass("drag"); // If you want to change the class
      ui.draggable.draggable({disabled: true}); // For revoking draggable functionality
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" ).html("Done")
  }
});

删除项目后如何禁用可拖动？

1 个答案: