Поменять элемент во время перетаскивания - JQuery UI - PullRequest
Новая
       43

Поменять элемент во время перетаскивания - JQuery UI

0 голосов
/ 07 июля 2019

Я хочу поменять элемент во время перетаскивания. Пример: когда я перетаскиваю красное поле в контейнер с синим прямоугольником, синее поле в этом контейнере превратится в красное поле, а красное поле, которое я перетаскиваю, превратится в синее поле. Тогда я продолжу тащить синюю коробку. Все это процесс перетаскивания.

HTML: 

<div class="parent">
  <div class="child" id="child1"></div>
</div>
<div class="parent">
  <div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

Js: 

$("document").ready(function() {
  $(".child").draggable({
    /* revert: true */
  });
  $(".parent").droppable({
    //accept: '.child',
    drop: function(event, ui) {
    },
    over: function(event, ui) {
      if ($(this).children().length > 0) {
        $(ui.draggable).html($(this).children());
      }
      $(this).html(ui.draggable);
    },
  });
});

Результат не тот, который я ожидал. Вы можете увидеть демо здесь: https://jsfiddle.net/lion5893/845ybwLs/23/

1 Ответ

1 голос
/ 07 июля 2019

Рассмотрим такую ​​функцию, как: 

function dragSwap(a, b) {
  var id1 = a.attr("id");
  var id2 = b.attr("id");
  b.attr("id", id1);
  a.attr("id", id2);
}

Глядя на ваш код, элементы одинаковы, оба <div>, классы одинаковы и т. Д., Единственное отличие - id.

У вас может быть что-то вроде этого: 

over: function(event, ui) {
  if ($(this).children().length > 0 && $(this).children().length == 1) {
    var item = $(this).children().eq(0);
    var drag = ui.draggable;
    dragSwap(item, drag);
  }
}

Рабочий пример: https://jsfiddle.net/Twisty/y285a4bq/

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

...