Перетащите элемент в неправильный элемент div - PullRequest
Новая
       21

Перетащите элемент в неправильный элемент div

0 голосов
/ 07 ноября 2018

Я пытаюсь поменять местами два изображения с помощью jQuery Draggable , когда пользователь нажимает на один элемент и перетаскивает его поверх другого. Тем не менее, мой код не помещает изображения в правильное положение. Он оставляет конечное изображение в том же месте и помещает изображение, которое было перетащено на следующее div, перекрывая другое изображение. Кто-нибудь может мне помочь? Я новичок в jQuery.

Структура HTML: 

<div class="painel-tabuleiro">
  <div class="col-1">
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>

  </div>
  <div class="col-2">
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>

  </div>
  <div class="col-3">
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>

  </div>
  <div class="col-4">
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>

  </div>
</div>

Соответствующий код jQuery: 

$(".elemento").draggable();
$(".containerImg").droppable({
  drop: function(event, ui) {
    var dropped = ui.draggable;
    var droppedOn = event.target;
    $(dropped).css({top: 0,left: 0}).appendTo(droppedOn);
    $(droppedOn.querySelector('img')).css({top: 0,left: 0}).appendTo(dropped.parent());
  },
});

1 Ответ

0 голосов
/ 07 ноября 2018

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

$(droppedOn.querySelector('img')).css({top: 0,left: 0})

Измените его на что-то подобное 

setTimeout(function() {
  $(droppedOn).find('img').css({
    top: 0,
    left: 0
  });
}, 10);

Вы также можете изменить .css() на .animate() для анимации.

Рабочий пример

...