2

我想将一个 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 回答