jQuery 可拖动/可拖放克隆和删除问题答案

【问题标题】：jQuery draggable/droppable clone and remove issuesjQuery 可拖动/可拖放克隆和删除问题
【发布时间】：2023-04-19 10:55:01
【问题描述】：

我正在尝试使用 jQuery UI 创建一个简单的应用程序。我有两个 div，一个是“可放置”容器，另一个是包含三个（或更多）图像的 div，它们可拖动。

我希望用户能够向容器添加最多三个图像。

Here is my JS Fiddle Demo

主要功能： (a) 用户可以将图像拖放到容器内。图像应对齐。 (b) 用户可以在图像被丢弃后对图像进行排序。 (c) 当图像被拖出 "droppable" 容器r时，应该从容器中移除。

问题： (a) 当“可放置”区域中只有一个图像时，它会在拖动时创建该图像的克隆。它还会弄乱对齐方式。我认为这可能与 "helper: clone" 选项有关。但是，当我已经向容器中添加了三个图像时，我没有看到这个错误。 (b) 我不知道如何实现 remove 功能。

非常感谢任何帮助！！！！提前谢谢！

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()
})

【问题讨论】：

您可能需要考虑使用.sortable() 与.droppable()

标签： javascript jquery jquery-ui

【解决方案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) 更难。我建议创建一个可以将项目拖动到的图标或放置区，这将导致它被删除。就个人而言，我会在项目上附加一个按钮以将其删除。

【讨论】：