перетащите в прокручиваемый div - PullRequest
Новая
       7

перетащите в прокручиваемый div

0 голосов
/ 24 мая 2018

Итак, я создал очень короткую программу перетаскивания, которая работает, однако есть небольшой глюк.

создал js fiddle здесь просто чтобы показать вам проблему, с которой я столкнулся

Как вы можете видеть, вы можете бросить карты в пунктирные слоты.проблема возникает, когда вы перемещаете полосу прокрутки 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.

что я делаю не так.как мне это исправить.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 25 мая 2018

Вы захотите выполнить некоторую очистку, но в основном, когда вы отбрасываете элемент, он никогда не присоединяется ни к одному из прокручиваемого содержимого.

Например, вы можете заменить: 

 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>

Надеюсь, это поможет.

...