1

クローンを作成してドロップゾーンにドラッグしているドラッグ可能な要素があります。ドロップゾーンに正しく設定されたら、ドラッグ可能な要素を再ドラッグできるようにします。

ドラッグ可能なdivを別のdiv内にカプセル化すると、奇妙な動作が発生します。カプセル化すると、クローン要素がドラッグ可能に設定されないため、要素を再ドラッグできません。ただし、jFiddleで、ドラッグ可能なdivの周囲からdivを削除すると、問題なく機能します。

働く：

<div id="draggable"></div>

動作しない： 

<div><div id="draggable"></div></div>

なぜカプセル化がこれにだまされているのかを知る必要があります。これらに似た複数のドラッグ可能なものを含むサイドバーが欲しいので、このような問題で意味のあるものを構築するのは難しいようです。サイドバーを作成するには、これらのドラッグ可能な要素をすべて別のdiv内にカプセル化する必要があるため、私が遭遇した難問を見ることができます。

以下のjFiddleリンクには、Jqueryなどが含まれています。

これが正しく機能しないjFiddleです：ここ。
そして、これが正しく機能するjFiddleです：ここ。

動作しないものの唯一の違い：ドームクラスdivは別のdivによってカプセル化されます。

4

1 に答える 1

0

何とかしてドラッグ可能を削除し、ストップブロックに追加されたクローンにドラッグ可能を追加する必要があります。これを試して：

$(function() {
    var i=1;
    var indexP;
    var blah

    $(".dome").draggable({
        revert: 'invalid',
        helper: 'clone',
        start: function(event, ui) {
            var newId = i;
            $(ui.helper).attr("id",newId);
            indexP = $(ui.helper).attr('id');
            blah = "#" + indexP;
        },
        stop: function(event, ui) {
            $(ui.helper).append("<br><span>"+blah+"</span>");
            $(ui.helper).clone().appendTo('#cont').draggable();

            i++;
        },

    });

    $("#cont").droppable({

    });     
});
function updateStatus (x,y,i) {
    var xPos = "#x" + i;
    var yPos = "#y" + i;
    $(xPos).text(x);
    $(yPos).text(y);
}
于 2013-01-29T05:21:25.957 に答える