1

Javascript (Jquery + JqueryUI) に問題があります。要素をドラッグ アンド ドロップしたいです。それが他の特定の要素の上にある場合、その要素は再作成されます..以下では、私が何を意味するかを見ることができるように、単純化された例を作成しようとしました..

ドラッグされた要素のコードを dom の新しい位置に適切に移動するにはどうすればよいですか? これは、「オーバー」イベントで発生するはずです。私がそれを落としたときではありません。ドロップゾーンの外に出たら、前に行ったアクションを元に戻す必要があります。ソースにコピーされた要素を意味し、他の新しく作成された要素を同じ ID に置き換えます。

ありがとう！パラ

-編集-: 視覚化を改善するために、コードにいくつかの変更を加えました。この行を削除すると:

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