将元素拖放到可拖动区域会导致拖动的项目消失或移动

Question

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

这是在我放弃我的项目之前：.............这是我丢弃物品后会发生的事情：

...

这是我的可拖动项目的代码，在Backbone View的渲染功能中：

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

这是我的droppable项目的代码：

      // 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);
        }
      })

我的目标是当物品被丢弃时我不想让物品移动。 This jsFiddle正是我希望我的代码做的事情，如API示例所示。

但是，当我将上面的代码（jsFiddle）应用到我的项目时，可拖动项目在删除时会消失。

这是在我放弃我的项目之前：.............这是我丢弃物品后会发生的事情：

..

我只更改了我的droppable项目的代码：

    // 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。

使用可拖动的stop:释放后，使用JQuery跟踪'缺少的元素，它似乎将转到最左侧。

回到可放置的代码，如果我们摆脱了所有内容，只需要包含droppable({...})函数和两个属性，一个用于accept，一个用于drop函数，但在drop函数中，我们append在任何实例化或未实例化的情况下，我们得到了预期的结果（尽管有控制台错误）：

$('#droppable-area').droppable({
    accept: '.stamp',
    drop: function (event, ui) {
        $('#droppable-area').append(n);
    }
})

但如果我们不包含append，或者我们在append中没有传递任何参数，则会消失'，如此fiddle中所示。

发生了什么事？

---

另外，在调查可拖动元素时，当你在左上角抓住它时，console.log(event.offsetX, event.offsetY);会打印一些东西〜5 5。如果你在左下方抓住它，它将是按钮div的大小，所以在我们的例子中，〜12 25。当您将项目INTO拖放到droppable div中但不要释放时，eventX和eventY会更改为光标在div中的位置。也许我可以在开始拖动后立即取eventX和eventY的初始值并使用它来调整确切的position:absolute？

Answer 1

您可能需要手动设置可拖动的位置，并根据可放置的目标手动设置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});
    }
  });

Answer 2

问题here是，helper元素是为了提供视觉反馈而创建的，一旦拖动为stopped，它就会被移除。

只需抓取clone()方法的dropped方法，然后append()将其从DOM删除之前删除它，你就可以了没事。

$('.stamp').draggable({
    revert: 'invalid',
    helper: 'clone',
    drag: function (event, ui) {}
})

$('#droppable-area').droppable({
    accept: '.stamp',
    drop: function (event, ui) {
         $(this).append(ui.helper.clone());
    }

})

.stamp {
    background: lightgrey;
    border: 1px solid green;
}
#draggable-items {
    width: 100%;
    height: 100px;
    margin: 10px;
}
#droppable-area {
    clear: left;
    margin: 10px;
    widows: 100%;
    height: 200px;
    border: 1px solid black;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="draggable-items">Draggable items
    <div id="system-label-1" class="btn stamp">1</div>
    <div id="system-label-2" class="btn stamp">2</div>
    <div id="system-label-3" class="btn stamp">3</div>
    <div id="system-label-4" class="btn stamp">4</div>
</div>
<div id="droppable-area">Droppable Area</div>

Answer 3

我有类似的问题！ 我发现helper: 'clone'某种方式不能按预期工作。 删除它，告诉我它是否有帮助。