拖放到可滚动的 div 中答案

【问题标题】：drag and drop into a scrollable div拖放到可滚动的 div 中
【发布时间】：2018-05-24 11:02:25
【问题描述】：

所以我创建了一个非常短的拖放程序，它可以工作，但是有一个小故障。

创建了一个 js fiddle here 只是为了向您展示我面临的问题

如您所见，您可以将卡片放入虚线槽中。当移动 div 的滚动条（包含插槽）时，就会出现问题。这些卡片似乎没有与虚线插槽粘在一起。现在我假设它是由于绝对和相对位置。我曾尝试更改它们，但它会产生更多问题。我还尝试了偏移方法，当滚动 div 时，它会计算插槽的偏移量，然后使用这些偏移量来定位汽车。它也不能很好地工作。代码如下。

$('#dropdiv').scroll(function() {
    var p = $( "#answerone" );
    var position = p.offset();
    console.log( "leftoffset: " + position.left + ", top: " + position.top );
    var position3 = p.position();
    console.log( "leftpos: " + position3.left + ", top: " + position3.top );
    // ui.draggable.addClass( $(this).attr('id') );
    $("#card1").draggable( 'enable' );
    // $("#card1").droppable( 'enable' );
    // $("#card1").draggable.position( { of: $("#card1"), my: 'left top', at: 'left top' } );
    $("#card1").draggable( 'option', 'revert', false );
    var position2 =  $("#card1").offset();
    console.log( "left2222: " + position2.left + ", top: " + position2.top ); 
    var toppos=position.top-position2.top;
    console.log("div position.top  - "+position.top );
    console.log("element position2.top - "+position2.top);
    console.log("relativvtop - "+toppos);
    // console.log("scrollTop - "+$("#dropdiv")scrollTop());
    $("#card1").css( {postion:'absolute',top: toppos+'px'});
});

edit1：如果我没有可滚动的 div，那么它可以完美运行。但出于某些设计原因，我需要可滚动的 div。

我做错了什么。我如何解决它。任何帮助表示赞赏。

【问题讨论】：

在handleCardDrop() 我看不到您将放置的项目附加到容器的位置。由于它不包含在<div> 中，但基本上是浮动的，因此在滚动时它会保持绝对位置。
看看你的小提琴，这可以通过检查放置后的元素来确认。它仍被 <div id="cardPile" style=" "> 包含。
@Twisty 所以基本上我需要使用克隆？还是我需要确保明确说明顶部和左侧的位置。样式不是由我的代码附加的，而是由拖放 jquery ui 函数附加的。那我该怎么办？
两者都不是。在您的放置函数中，放置的项目应附加到容器中。

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

【解决方案1】：

您需要进行一些清理，但基本上，当您放下该项目时，它永远不会附加到任何正在滚动的内容。

例如，您可以替换：

 ui.draggable.position({
   my: 'left top',
   at: 'left top',
   of: $(this)
 });

与：

 ui.draggable.css({
   top: "",
   left: ""
 }).appendTo($(this));

您的第一段代码只是设置项目的位置。当您滚动时，该项目会根据 top 和 left 保持在该位置。

示例：http://jsfiddle.net/Twisty/x0fmgxaz/1/

这会产生以下 HTML：

<div id="answerone" class="cardSlots answer ui-droppable" style="margin: 0 auto;display:block;float: none;" aria-disabled="false">
  <div id="card2" class="cardname ui-draggable answerone animated pulse" style="position: relative; z-index: 5;" aria-disabled="false">
    2
  </div>
</div>

希望对您有所帮助。

【讨论】：