Question

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

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

关键功能 （a）用户可以拖动图像并放入容器内部。图像应对齐。（b）用户可以在图像被丢弃后对图像进行排序。（c）当图像被拖出＆＃34; droppable＆＃34;容器 r，它应该从容器中删除。

问题：（a）当＆＃34; droppable＆＃34;中只有一个图像时区域，只要拖动它就会创建该图像的克隆。它也弄乱了对齐。我在想它可能与＆＃34; helper：clone＆＃34; 选项有关。但是，当我已经在容器中添加了三个图像时，我没有看到此错误。（b）我无法弄清楚如何实施删除功能。

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

HTML：

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

JS：

{{1}}

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）更难。我建议创建一个图标或dropzone，可以将项目拖动到该区域，这将导致它被删除。就个人而言，我会在项目上添加一个按钮来删除它。

jQuery draggable / droppable克隆并删除问题

1 个答案: