Dragable капли в неправильном месте при втором перетаскивании - PullRequest
Новая
       39

Dragable капли в неправильном месте при втором перетаскивании

0 голосов
/ 07 февраля 2019

Я пытаюсь перетащить «шаблоны» (изначально как клоны) из «магазина» в выпадающие слоты.После этого я хочу иметь возможность бросить перетаскиваемый предмет в любой желаемый слот.Draggables устанавливаются следующим образом: 

$( ".template" ).draggable({
        helper: "clone",
    }
);

$( ".item" ).draggable();

Я решил проблему повторного клонирования, заменив класс «template» классом «item» при первом отбрасывании и переключении функции отбрасывания изклонировать прямой элемент следующим образом: 

$( ".template-slot" ).droppable({ 
accept: ".template, .item",

drop: function( event, ui ) {

    if(ui.draggable.hasClass("template")) {

        $(this).append(ui.draggable.clone())

        // add item class 
        $(".template-slot .template").addClass("item");

        // remove template class
        $(".item").removeClass("ui-draggable template");

        // expand to fit the slot
        $(".item").addClass("expand-to-slot");

        // make it draggable again
        $(".item").draggable();    

    }

    if(ui.draggable.hasClass("item")) {
        $(this).append(ui.draggable);
    }

}                            
});

Первое перетаскивание работает нормально.проблема возникает при втором перетаскивании.Элемент перетаскивается хорошо, но когда его уронили, он помещается вдвое дальше, куда бы я его ни перетаскивал.Так, например, если я перетащил его на 50 пикселей вправо, он опустится на 100 пикселей вправо.то же самое с вверх и вниз и т. д.

Я подозреваю, что это как-то связано с тем, что смещение является кумулятивным, но я не выяснил, почему он это делает или как это исправить.

У меня естьздесь создали скрипку: https://jsfiddle.net/stefem1969/a86jmnxu/10/, чтобы показать проблему.

Надеюсь, что кто-то может помочь.

1 Ответ

0 голосов
/ 07 февраля 2019

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

JavaScript 

$(function() {

  function makeDrag(obj, opt) {
    if (obj.hasClass("ui-draggable")) {
      obj.removeClass("ui-draggable");
      obj.attr("style", "");
    }
    if (opt === undefined) {
      opt = {};
    }
    obj.draggable(opt);
  }

  makeDrag($(".template, .item"), {
    helper: "clone",
  });

  $(".template-slot").droppable({
    accept: ".template, .item",
    drop: function(event, ui) {
      if (ui.draggable.hasClass("template")) {
        console.log("it has the template class!");
        var newItem = ui.draggable.clone();
        newItem.toggleClass("template item");
        newItem.addClass("expand-to-slot");
        newItem.appendTo($(this));
        makeDrag(newItem);
      }

      if (ui.draggable.hasClass("item")) {
        console.log("it has the item class!")
        var droppableOffset = $(this).offset();
        console.log("droppableOffset: ", droppableOffset);
        ui.draggable.attr("style", "").appendTo($(this));
      }
    }
  });

  $(".template-store, .thagomizer").droppable({
    accept: ".item",
    drop: function(event, ui) {
      ui.draggable.remove();
    }
  });
});

Частью перетаскивания является установка top и left при его перемещении.Даже если вы добавите элемент к другому элементу, он все равно будет иметь его.Очистка, которая может помочь выполнить то, что вы ищете.

makeDrag() просто полезен для выполнения одних и тех же операций.

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

...