拖放时拖放问题

Question

我正在处理的一个布局附在这里，但我有两个问题：

1. 拖动可拖项目的位置不对。
2. 我想确保在删除之前的内容是覆盖的，这是我做过的并且工作得很好，但是我有三个可删除的，而且每当我删除任何一个可下拉的内容时，其他可丢失的元素也会被最新的替换，但是我想将覆盖限制在我要删除的项上。

请在大于1024 in的屏幕上查看布局。

如果有人能告诉我，那就太棒了。

Answer 1

定位问题来自您分别向translateX和translateY提供的值，如下所示：

  .problemanserwrapper .problemanswers.ui-draggable-dragging {
    transform: rotate(0)
  }
  .problemanserwrapper .problemanswers:nth-child(1).ui-draggable-dragging {
    transform: rotate(0)
  }
  .problemanserwrapper .problemanswers:nth-child(2).ui-draggable-dragging {
    transform: rotate(0) translateX(75%) translateY(-25%)
  }
  .problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
    transform: rotate(0) translateX(135%) translateY(-100%)
  }
  .problemanserwrapper .problemanswers:nth-child(4).ui-draggable-dragging {
    transform: rotate(0) translateX(275%) translateY(-80%)
  }
  .problemanserwrapper .problemanswers:nth-child(5).ui-draggable-dragging {
    transform: rotate(0) translateX(380%) translateY(47%)
  }
  .problemanserwrapper .problemanswers:nth-child(6).ui-draggable-dragging {
    transform: rotate(0) translateX(492%) translateY(-20%)
  }
  .problemanserwrapper .problemanswers:nth-child(7).ui-draggable-dragging {
    transform: rotate(0) translateX(92%) translateY(72%)
  }
  .problemanserwrapper .problemanswers:nth-child(8).ui-draggable-dragging {
    transform: rotate(0) translateX(202%) translateY(40%)
  }
  .problemanserwrapper .problemanswers:nth-child(9).ui-draggable-dragging {
    transform: rotate(0) translateX(302%) translateY(-20%)
  }
  .problemanserwrapper .problemanswers:nth-child(10).ui-draggable-dragging {
    transform: rotate(0) translateX(402%) translateY(90%)
  }

如果你找到他们正确的价值，那么他们的位置就会好的。我不是为他们都这样做的，但我给你们举一个例子：

  .problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
    transform: rotate(0) translateX(75%) translateY(-50%)
  }

第二个问题的原因是使用一个名为pastDraggable的变量来跟踪所有三个框的历史记录。每当您将一项放入框中时，pastDraggable的值将被更改。每当您放置下一项时，pastDraggable的值将是前一项，与其框无关，它将从框中移除，新值将覆盖。您应该将pastDraggable声明为数组：

var pastDraggable = ["", "", ""];

在drop事件中，查找索引：

        var droppableIndex = 0;
        if ($(this).hasClass("droppable2")) droppableIndex = 1;
        else if ($(this).hasClass("droppable3")) droppableIndex = 2;

在每次使用pastDraggable时，请确保将其与索引(如pastDraggable[droppableIndex] )一起使用。