Question

我想将一个div拖到一个droppable div并让droppable div'包含它'，而最初的可拖动div仍然可以在droppable中拖动。

然而，

当我将可拖动的div拖动到droppable div时，可拖动的div以视觉上偏移的方式附加。

要切断上面的童谣，看看我的意思是看下面的小提琴并将 thing1 或 thing2 拖到灰色调色板。

偏向右侧。

我想知道如何解决这个问题。

$(".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)});
    }
});

Answer 1

有一天我才面对这个问题。经过大量的努力，我找到了解决方案。我只是在删除时删除了draggable元素，并再次在droppable元素中创建了一个相同的元素。我知道这不是你的解决方案。但可能这可以帮到你。 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'
                 });
         }});

JQuery draggable和droppable追加问题

1 个答案: