Jquery ui 将元素放入可拖动区域会导致被拖动的项目消失或移动

当我拖动一个项目并将其放到可拖放区域时，该项目将重新对齐，使其左下角位于鼠标光标处。请注意，我将项目从一个姐妹元素的子元素拖到另一个姐妹元素的曾孙元素，最终拖到主干中两个非常不同的嵌套视图之间

这是在我放下我的物品之前：。。。。。。。。。。。。。这是我放下物品后发生的情况：

这是主干视图渲染函数中我的可拖动项的代码：

   // JQ Draggable
   $('.stamp').draggable({
      revert: 'invalid',
      helper: 'clone',
      drag: function( event, ui ) {
        //Not using the drag function, should I?
      }
  });

这是我的可拖放项目的代码：

      // JQUI Droppable
      $(this.el).droppable({
        accept: '.stamp',
        drop: function( event, ui ) {
          var newDiv = $(ui.helper).clone(false)
            .removeClass('ui-draggable-dragging')
            .css({position:'absolute', left:event.offsetX, top:event.offsetY});
          $(this).append(newDiv);
        }
      })

    // JQ Droppable
      $(this.el).droppable({
        accept: '.stamp',
        drop: function( event, ui ) {
          var newDiv = $(ui.helper).clone(false)
          .removeClass('ui-draggable-dragging')
          .css({position:'absolute', left: ui.offsetX, top: ui.offsetY});
          $(this).append(newDiv);
        }
      })

我的目标是，当物品掉落时，我不希望物品移动。正如API示例所证明的那样，JSFIDLE正是我希望代码做的事情

然而，当我将上面的代码（JSFIDLE）应用于我的项目时，可拖动项在删除时消失

这是在我放下我的物品之前：。。。。。。。。。。。。。这是我放下物品后发生的情况：

我只更改了我的可拖放项目的代码：

      // JQUI Droppable
      $(this.el).droppable({
        accept: '.stamp',
        drop: function( event, ui ) {
          var newDiv = $(ui.helper).clone(false)
            .removeClass('ui-draggable-dragging')
            .css({position:'absolute', left:event.offsetX, top:event.offsetY});
          $(this).append(newDiv);
        }
      })

    // JQ Droppable
      $(this.el).droppable({
        accept: '.stamp',
        drop: function( event, ui ) {
          var newDiv = $(ui.helper).clone(false)
          .removeClass('ui-draggable-dragging')
          .css({position:'absolute', left: ui.offsetX, top: ui.offsetY});
          $(this).append(newDiv);
        }
      })

最后，只需将CSS从

event.offset*

更改为

ui.offset*

。还请注意，在可拖放div区域中，有一个SVG与另外两个div一起占据了div的大部分

使用JQuery跟踪“丢失的元素”使用DragTable上的

stop:

释放后，它似乎要转到最左边

回到可拖放代码，如果我们去掉所有内容，只包含带有两个属性的

可拖放（{…}）

函数，一个用于

接受的内容，一个用于
拖放
函数，但是在
拖放
函数中，我们将
附加
到任何内容中，无论是否实例化，我们得到了预期的结果（尽管有控制台错误）：

但是如果我们不包括
附加
，或者如果我们在
附加
中不传入任何参数，它就会“消失”，如图所示

发生了什么事


另外，在调查可拖动元素时，当您在左上角抓住它时，
console.log（event.offsetX，event.offsetY）
将打印某些内容~
5
。如果你在左下角抓住它，它将是按钮div的大小，因此在我们的例子中，~
12 25
。当您将项目拖动到可拖放div中但不释放时，
eventX
和
eventY
会发生变化，作为div中光标的位置。也许我可以在他们开始拖动时获取
eventX
和
eventY
的初始值，并使用该值来调整确切的
位置：绝对值
？
我遇到了类似的问题！
我发现
helper:“clone”
不知何故无法按预期工作。
把它拿走，告诉我是否有用
 问题在于，创建元素只是为了提供视觉反馈，一旦拖动完成，它将被删除

只要使用a方法抓取它的一个副本，然后在它从
DOM
中删除之前将其拖放，就可以了


$（'.stamp'）。可拖动({
还原：“无效”，
助手：“克隆”，
拖动：函数（事件，ui）{}
})
$（“#可放置区域”）。可放置({
接受：'.stamp'，
drop：函数（事件、用户界面）{
$（this.append（ui.helper.clone（））；
}
})
.stamp{
背景：浅灰色；
边框：1px纯绿色；
}
#拖拉物品{
宽度：100%；
高度：100px；
利润率：10px；
}
#可降落区{
清除：左；
利润率：10px；
寡妇：100%；
高度：200px；
边框：1px纯黑；
}

拖拉物品
1.
2.
3.
4.
可拖放区域
您可能需要手动设置拖放位置，使其在拖放时与可拖放目标相关的ui对象位置上显示大小写

// JQ Droppable
  $(this.el).droppable({
    accept: '.stamp',
    drop: function(event, ui) {
      $('<div class="btn stamp dropped"></div>')
        .text(ui.draggable.text())
        .appendTo(this)
        .css({position:"absolute", left:ui.offset.left-this.offsetLeft, top:ui.offset.top-this.offsetTop});
    }
  });

//JQ可拖放
$（this.el）。可拖放({
接受：'.stamp'，
drop：函数（事件、用户界面）{
$('')
.text（ui.draggable.text（））
.附于（本）
.css（{position:“absolute”，left:ui.offset.left-this.offsetLeft，top:ui.offset.top-this.offsetTop}）；
}
});
很长的问题，希望标题更详细我们需要
助手：'clone'
但是要让它成为一个可重复的“戳记”并被反复使用。不过，您是正确的，删除它会有所帮助。请插入“revert:true”，然后重试！