恢复拖动和下垂位置

时间:2016-03-30 13:37:21

标签: jquery jquery-ui jquery-ui-droppable

我在我的代码中使用了drag和drope jquery ui。代码工作正常。但是用户应该有能力在保存后编辑数据。这意味着当用户再次打开页面时,我需要恢复拖动和下垂位置。我尝试使用触发器,但我无法模仿"放弃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" ));

当前错误:未捕获TypeError:ui.draggable.clone不是函数

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

1 个答案:

答案 0 :(得分:1)

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

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

<强> JQuery的

<?php echo "<a href='attendance_add.php'>" . $row['emp_name'] . "</a> "; ?>
  1. 不要假设您在$(".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
  2. var me = $(ui).clone();中,您需要传递这样的元素:drop
  3. 希望有所帮助。您可以通过检查传递的内容来改善您的活动。像$(this).trigger("DopeEvent", ui.draggable);之类的东西可以起作用。