Javascript 拖放；放下一个消极的位置

我正在做一个拖放的工作，当你把物体拖到可拖放的区域时，物体会被赋予你在负片区域的移动作为负片定位

为了说明这一点，我把它放在一起，你可以把一只可爱的狗放在我的问题所提供的风景中。下面使用的代码：

//DRAG & DROP
$(document).ready(
    function() {
      var a = 3;
      $('.drag').draggable({
        revert: 'invalid',
        cursor: 'move',
        //containment: '#drop',
        start: function(event,ui) { $(this).css("z-index", a++)}
      });

      $('#drop').droppable({
        accept: ".drag",
        drop: function(event, ui) {
          console.log(this);

          //$(this).addClass('dropped'),
          $(this).append(ui.draggable);
        }
      });
});

我已经读了很多关于纠正这个问题的方法的书，其中很多似乎属于包含变量错误，但遗憾的是，我没有幸运地在我自己的设置中实现这些修复。需要注意的一点是，我正在使用HTML2CANVAS导出此“放置”区域的快照，因此我必须确保移动的项目实际位于空间中。如有任何建议，将不胜感激

---

提前谢谢

更新；我可以通过强制绝对定位来解决这个问题。没有响应，但我不能100%确定我需要它

更新；我可以通过强制绝对定位来解决这个问题。没有响应，但我不能100%确定我需要它

这就是你想要的吗？从狗保持可见的意义上说，是的。这一结果的问题在于，这只狗停留在原来的空间代码中，而不是插入到#放置空间中。如果没有实际进入拖放空间，我提到的HTML2CANVAS将无法捕获其图像。如果您想在拖放后在画布上绘制图像，则可以检测画布上的鼠标坐标，然后从拖放事件处理程序在画布上的该位置绘制图像。如果这是你想要的，那么我可以试试小提琴。听起来像是想要的结果。如果你有时间摆弄，试试看。关于这个概念，我也会尝试一些选择。好吧，我当时没有时间，这是新的。这是一个概念的证明，你必须对它进行微调。我建议您阅读有关canvas元素的内容。例如，canvas元素的大小应该作为属性而不是在css中给定。您还必须使用context.drawImage绘制画布的背景。您必须优化html和css，以便放置的坐标计算准确。为此，请避免在dom中嵌套过多。检查一下，我稍后会把它作为答案贴出来。这是你想要的吗？从狗保持可见的意义上说，是的。这一结果的问题在于，这只狗停留在原来的空间代码中，而不是插入到#放置空间中。如果没有实际进入拖放空间，我提到的HTML2CANVAS将无法捕获其图像。如果您想在拖放后在画布上绘制图像，则可以检测画布上的鼠标坐标，然后从拖放事件处理程序在画布上的该位置绘制图像。如果这是你想要的，那么我可以试试小提琴。听起来像是想要的结果。如果你有时间摆弄，试试看。关于这个概念，我也会尝试一些选择。好吧，我当时没有时间，这是新的。这是一个概念的证明，你必须对它进行微调。我建议您阅读有关canvas元素的内容。例如，canvas元素的大小应该作为属性而不是在css中给定。您还必须使用context.drawImage绘制画布的背景。您必须优化html和css，以便放置的坐标计算准确。为此，请避免在dom中嵌套过多。检查一下，我稍后会将其作为答案发布。