jQuery可拖動/可拖放克隆並刪除問題

Question

我正在嘗試使用jQuery UI創建一個簡單的應用程序。 我有兩個div，一個是“可放置”容器 ，另一個是包含三個（或更多）圖像並且它們是可拖動的div。

我希望用戶能夠將最多三個圖像添加到容器中。

這是我的JS小提琴演示

關鍵功能： （a）用戶可以將圖像拖放到容器內部。 圖像應對齊。 （b）用戶可以在刪除圖像后對圖像進行排序。 （c）將圖像拖出“可放置”容器時 ，應將其從容器中取出 。

問題： （a）當“可放置”區域中只有一個圖像時，每當拖動圖像時，它都會創建該圖像的副本。 它還會弄亂對齊方式。 我認為這可能與“幫助程序：克隆”選項有關。 但是，當我已經向容器中添加了三個圖像時，沒有看到此錯誤。 （b）我不知道如何實現刪除功能。

任何幫助是極大的贊賞！！！！ 先感謝您！

HTML：

<div id="demo">
</div>

<div class="parameter">
  <div class="option" id="tab"></div>
  <div class="option" id="dual"></div>
  <div class="option" id="standard"></div>
</div>

JS：

$(document).ready(function() {
  $(".option").draggable({
    helper: "clone",
    opacity: 0.5,
    appendTo: "#demo"
  })

  $("#demo").droppable({
    accept: ".option",
    drop: function(event, ui) {
      if (document.getElementsByClassName("option").length <= 6) {
        ui.draggable.clone().appendTo($(this))
      }
    }
  })

  $("#demo").sortable()
})

Answer 1

工作示例： https : //jsfiddle.net/Twisty/q09m84er/

的JavaScript

$(function() {
  $(".option").draggable({
    helper: "clone",
    opacity: 0.5,
    connectToSortable: "#demo"
  });

  $("#demo").sortable({
    axis: "y",
    items: "> div.option",
    receive: function(event, ui) {
      if ($("#demo .option").length <= 6) {
        var item = ui.helper;
        var type = ui.item.attr("id");
        var count = $("#demo div[id|='" + type + "']").length;
        item.attr("id", type + "-" + ++count);
        item.appendTo($(this));
      } else {
        return false;
      }
    }
  });
});

a）用戶可以將選項從列表拖動到可排序

b）用戶拖動后可以排序

c）比較困難。 我建議創建一個圖標或放置區域，將其拖動到該區域即可將其刪除。 就個人而言，我會在該項目上附加一個按鈕以將其刪除。