1

我遇到了 Javascript (Jquery + JqueryUI) 的一些问题。我想拖放一个元素。如果它在另一个特定元素之上，则重新创建该元素.. 下面我尝试制作一个简化的示例，以便您了解我的意思..

如何将拖动元素的代码正确移动到 dom 中的新位置？这应该发生在“结束”事件上。不是当我放下它的时候。当我“离开”放置区时，应该恢复之前所做的操作。表示复制回其源的元素，用相同的 id 替换另一个新创建的元素。

谢谢！帕拉

-Edit-：为了更好的可视化，我对代码进行了一些更改。当我删除此行时：

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

“out：”代码进入 out-Part.. 问题是，我必须更改该 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>
4

0 回答 0