Question

我遇到了一些Javascript问题（Jquery + JqueryUI）.. 我想拖放一个元素。如果它超过其他特定元素，则重新创建元素。下面我试着做一个简化的例子让你看看我的意思..

如何将拖动元素的代码正确移动到dom中的新位置？这应该发生在“结束”事件上。当我放弃它时，不。当我“掉出”掉落区时，应该恢复之前的行动。表示元素被复制回它的源代码，用相同的id替换另一个新创建的元素。

谢谢！帕拉

CNC中：我在代码中做了一些更改，以实现更好的可视化。当我删除此行时：

ui.draggable.attr("id", ui.draggable.attr("id") + "_bkp");

“out：”代码进入了部分..问题是，我必须更改该ID，否则会有2个相同的ID。我可以以某种方式告诉jquery，那仍然是同一个元素吗？

<!doctype html> 
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .bigbox{ width: 150px; height: 150px; padding: 0.5em; margin: 10px; border:thin solid black;}
        .box{ width: 100px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; border:thin solid black;}
    </style>
    <script>
        $(function() {
            $("#draggable_1, #draggable-nonvalid").draggable();
            $("#droppable").droppable({
                over: function(event, ui) {
                    ui.draggable.attr("id", ui.draggable.attr("id") + "_bkp");
                    ui.draggable.appendTo($("#muell"));
                    $('#momo').append('<div id="draggable_1" class="box"><p>I am a new Elemento</p></div>');
                },
                accept: "#draggable_1",
                out: function(event, ui) {
                    $.each($("#muell > div"), function() {
                        var idOfBackedupElement = $(this).attr("id");
                        var origId = $(this).attr("id").replace("_bpk", "");
                        $("#" + origId).replaceWith($("#" + idOfBackedupElement));
                    });
                }
            });
        });
    </script>
</head>
<div id="momo" style="border:thin solid blue;float:left;">
    <div id="draggable_1" class="box" >
        <p>
            Drag me to my target
        </p>
    </div>
    <div id="droppable" class="bigbox">
        <p>
            accept: '#draggable'
        </p>
    </div>
</div>


<div id="muell" style="border:thin solid red;float:left;"></div>

</html>

JqueryUI draggable - 在dom中移动拖动的元素

0 个答案: