第二次拖放时可拖放位置错误

Question

我正在尝试将 "templates"（最初作为克隆）从 "store" 拖到可放置的插槽中。此后，我希望能够将拖动的项目放入我想要的任何插槽中。 Draggables设置如下：

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

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

我通过在第一次删除和删除函数切换中用 "item" class 替换 "template" class 来解决重新克隆的问题从克隆到直接元素如下：

$( ".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 像素。上下等同理

我怀疑这与偏移量的累积有关，但还没有弄清楚为什么会这样或如何解决它。

我在这里创建了一个 fiddle：https://jsfiddle.net/stefem1969/a86jmnxu/10/ 来说明问题。

希望有人能提供帮助。

Answer 1

工作示例：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();
    }
  });
});

draggable的一部分是在移动时设置一个top和left。即使您将该项目附加到另一个元素，它仍然会有那些。清理可以帮助完成您正在寻找的东西。

makeDrag() 只是有助于多次执行相同的操作。

希望对您有所帮助。

第二次拖放时可拖放位置错误

Draggable drops in wrong place on second drag

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable