Question

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

虽然拖动可拖动项的位置不正确。
我想确保在拖放时，先前的内容被覆盖，这是我所做的并且可以正常工作，但是我有三个可放置对象，每当我放下任何可放置对象时，其他可放置对象中的放置元素也将被替换直到最近，但我想将覆盖范围限制为我要放的物品。

Plesae在大于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]。

拖动时的拖放问题

1 个答案: