恢复拖放位置

Question

我在我的代码中使用拖放 jquery ui。代码工作正常。但是用户应该有一定的能力在保存后编辑数据。这意味着当用户再次打开页面时，我需要恢复拖放位置。我尝试使用触发器，但无法模拟 "drop ui" 我该怎么做？

$( ".draggable-children-username" ).draggable({
    snap: ".draggable-in-box",
    opacity: 0.7,
    revert: 'invalid',
    helper: "clone"
});
$(".draggable-in-box").droppable({
    accept: $(".draggable-children-username"),
    hoverClass: "dropHover",
    drop: function (ev, ui) {
        $(this).trigger("DopeEvent", ui);
    }
});

$( ".draggable-in-box" ).bind("DopeEvent", function(event, ui ){
    console.log(ui);

    var me = ui.draggable.clone()
    ui.draggable.draggable("disable")
    me.appendTo(this)
    .addClass("newClass");
    me.draggable({
        accept: ".draggable-in-box",
        revert: function(valid) {
            if(!valid) {
                this.remove();
                $(".dr-children-id-"+this.attr("data-id")).draggable("enable");
            }
        }
    });
});

$( ".draggable-in-box" ).trigger("DopeEvent", $( ".dr-children-id-140" ));

当前错误：未捕获类型错误：ui.draggable.clone 不是函数

http://jsfiddle.net/vjGY4/123/

Answer 1

一些修复。我认为您正在尝试做的工作示例：

http://jsfiddle.net/Twisty/vjGY4/125/

JQuery

$(".draggable-children-username").draggable({
  snap: ".draggable-in-box",
  opacity: 0.7,
  revert: 'invalid',
  helper: "clone"
});

$(".draggable-in-box").droppable({
  accept: $(".draggable-children-username"),
  hoverClass: "dropHover",
  drop: function(ev, ui) {
    $(this).trigger("DopeEvent", ui.draggable);
  }
});

$(".draggable-in-box").bind("DopeEvent", function(event, ui) {
  console.log(ui);

  var me = $(ui).clone();
  //ui.draggable.draggable("disable")
  me.appendTo(this)
    .addClass("newClass");
  me.draggable({
    accept: ".draggable-in-box",
    revert: function(valid) {
      if (!valid) {
        this.remove();
        $(".dr-children-id-" + this.attr("data-id")).draggable("enable");
      }
    }
  });
});

$(".draggable-in-box").trigger("DopeEvent", $(".dr-children-id-140"));

不要假设您正在传递一个可拖动对象或一个 jquery 对象 DopeEvent。使用 var me = $(ui).clone();
在您的 drop 中，您需要像这样传递元素：$(this).trigger("DopeEvent", ui.draggable);

希望对您有所帮助。您可以通过检查正在传递的内容来改进您的事件。 if(typeof ui === "object"){} 之类的东西可以工作。

恢复拖放位置

Restore drag and drope positions

jquery

jquery-ui

jquery-ui-droppable