拖动时出现拖放问题

Question

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

拖动时draggable item位置不对
我想确保在放下之前的内容时被覆盖，我这样做了并且工作正常，但是我有三个 dropables 并且每当我放下任何一个 dropables 时，其他 dropables 中的 dropped 元素是也替换为最新的，但我想将覆盖限制为我放置的项目。

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

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

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].

拖动时出现拖放问题

Drag and Drop issue while dragging

javascript

jquery

droppable

draggable

jquery-ui-draggable