拖动时的拖放问题答案

【问题标题】：Drag and Drop issue while dragging拖动时的拖放问题
【发布时间】：2018-09-15 10:21:23
【问题描述】：

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

拖动时，可拖动项的位置不对。
我想确保在放置之前的内容被覆盖，我做了并且工作正常，但是我有三个 dropables，每当我放置在任何 dropables 上时，其他 dropables 中的已删除元素也会被替换最晚，但我想将覆盖限制为我正在丢弃的项目。

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

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

【问题讨论】：

codepen.io/rajat_jain/pen/EepMBr
语法和格式得到了改进。
请将代码的相关部分添加到问题中。
@LajosArpad 由于字符限制，无法在此处粘贴整个代码，如果您现在可以查看，我已经清理了 codepen 链接中的代码。
@LajosArpad，感谢您的提示，我会记住这些提示。

标签： javascript jquery draggable jquery-ui-draggable droppable

【解决方案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]。

【讨论】：

您好@Lajos，是的，昨天解决了第二个问题，问题正如您所描述的，使用相同的变量。谢谢你。但是对于第一个问题，除了找到当前的transform值，就没有别的办法了，比如把mousemove的位置给到draggable的位置？
@RajatJain 这可能是可能的，但代码太长，无法提供免费帮助，不知道在哪里查看。在这里我们想为您提供帮助，但我们不会分配太多时间。您应该在浏览器中检查哪些 CSS 规则有助于元素的位置以及问题的来源。这将是一个冗长的分析，回答者不会在此进行。最好是根据我的回答做一个快速修复，这样你的软件就会很好地工作，如果你对解决方案不满意，那就找一个更优雅的解决方案。
感谢您的洞察，我知道这很耗时。但是我找到了根本原因并解决了它，问题是我用来放置元素的变换的翻译属性，即使在拖动项目时也会影响位置，所以我将其更改为使用边距进行定位并且它正在工作现在太好了。感谢您的时间和帮助。
@RajatJain 欢迎您，我很高兴您的问题得到解决。