Question

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

创建了一个js小提琴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。

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

Answer 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>

希望有所帮助。

拖放到可滚动的div中

1 个答案: