2

div をドロップ可能な div にドラッグし、ドロップ可能な div に「それを含める」ようにしたいのですが、最初のドラッグ可能な div はドロップ可能な div 内でまだドラッグ可能です。

でも、

ドラッグ可能な div をドロップ可能な div にドラッグすると、ドラッグ可能な div が視覚的にオフセットされるように追加されます。

上記の童謡を切り抜けて、私が実際に何を意味するかを確認するには、下のフィドルを見て、thing1またはthing2を灰色のパレットにドラッグします。

右にオフセットします。

http://jsfiddle.net/mnmyS/

それを修正する方法を知りたいです。

$(".card").draggable();

$('.box').draggable().resizable();



$(".pallette").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        $(".card").draggable({containment: $(this)});
    }
});
4

1 に答える 1

0

私はいつかこの問題に直面していました。多くの努力の後、私は私のための解決策を見つけました。ドロップ時にドラッグ可能な要素を削除し、ドロップ可能な要素内に同じ要素を再度作成しました。私はそれがあなたの解決策ではないことを知っています。しかし、これはあなたを助けることができるかもしれません。 http://jsfiddle.net/D3cxz/

var div = document.createElement("div");
div.style.width = "30%";
div.style.height = "10%";
div.className = "card";
div.id = "draggable";
div.innerHTML = "thing1";
div.style.fontSize="small";

    document.body.appendChild(div);
    $('.card').draggable();

    var box = document.createElement("div");
    box.className = "box";

    document.body.appendChild(box); 
    $('.box').draggable();

    var pallette = document.createElement("div");
    pallette.className = "pallette";

    box.appendChild(pallette);


    $('.pallette').droppable({
         drop: function (event, ui) {
        div.parentElement.removeChild(div);

           var div1 = document.createElement("div");
        div1.style.width = "30%";
        div1.style.height = "10%";
        div1.className = "card";
        div1.id = "draggable";
        div1.innerHTML = "thing1";
        div1.style.fontSize="small";
              pallette.appendChild(div1);

             $('.card').draggable(
                 {
                     containment: '.pallette'
                 });
         }});
于 2013-10-30T18:16:34.410 に答える