javascript - jQuery动态添加可放置区域

Question

在以下代码中，单击按钮会动态添加一个可放置区域。但是，拖放在动态添加的可放置区域上不起作用。如您在以下代码中所见，它适用于预构建可放置区域。

我该如何解决？

$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid",
}); 

$(".droppable").droppable({ 
    accept: ".draggable",
    hoverClass: "droppable",
  drop: function( event, ui ) {
    $( this )
      .addClass( "droppable" )      
      .html( "Dropped!" );
  }
        
});

$('button').on('click', function(e){
    $('.droppables').append('<div class="droppable ui-droppable">Drop</div>');
});

body {
  padding: 20px;
  font-family: Helvetica;
}

.draggables,
.droppables{
  overflow: hidden;
  margin-bottom: 30px;
}

.draggable,
.droppable{
  width: 100px;
  height: 100px;
  background: #74B9FF;
  float: left;
  margin-right: 10px;
  text-align: center;
  padding-top: 40px;
  box-sizing: border-box;
  cursor: move;
  
}

.droppable {
   background: #FFEAA7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="draggables">
    <div class="draggable">Drag me</div>
    <div class="draggable">Drag me</div>
    <div class="draggable">Drag me</div>
    <div class="draggable">Drag me</div>
</div>

<div class="droppables">
    <div class="droppable">Drop</div>
</div>

<button>Add droppable</button>

标签： javascriptjquery

Answer 1

您需要对droppable()添加到 DOM 的每个新 div 进行实例化：

$(".draggable").draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  revert: "invalid",
});

let droppableDefaultSettings = {
  accept: ".draggable",
  hoverClass: "droppable",
  drop: function(event, ui) {
    $(this).addClass("droppable").html("Dropped!");
  }
}

$(".droppable").droppable(droppableDefaultSettings);

$('button').on('click', function(e) {
  $('<div class="droppable ui-droppable">Drop</div>').appendTo('.droppables').droppable(droppableDefaultSettings);
});

body {
  padding: 20px;
  font-family: Helvetica;
}

.draggables,
.droppables {
  overflow: hidden;
  margin-bottom: 30px;
}

.draggable,
.droppable {
  width: 100px;
  height: 100px;
  background: #74B9FF;
  float: left;
  margin-right: 10px;
  text-align: center;
  padding-top: 40px;
  box-sizing: border-box;
  cursor: move;
}

.droppable {
  background: #FFEAA7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="draggables">
  <div class="draggable">Drag me</div>
  <div class="draggable">Drag me</div>
  <div class="draggable">Drag me</div>
  <div class="draggable">Drag me</div>
</div>

<div class="droppables">
  <div class="droppable">Drop</div>
</div>

<button>Add droppable</button>