JQuery 可拖放追加问题答案

【问题标题】：JQuery draggable and droppable append issueJQuery 可拖放追加问题
【发布时间】：2013-10-21 01:34:42
【问题描述】：

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

然而，

当我将可拖动的 div 拖到可放置的 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)});
    }
});

【问题讨论】：

这是您要找的吗？ jsfiddle.net/ZkC2q
关闭但不，我希望能够将内部 div 拖动到主机可放置 div 内的任何位置。您的版本有点“浮动”到左侧并限制垂直移动

标签： javascript jquery jquery-ui droppable

【解决方案1】：

我在某天之前遇到过这个问题。经过很多努力，我找到了适合我的解决方案。我只是在拖放时删除了可拖动元素，并在可拖放元素内再次创建了相同的元素。我知道这不是你的解决方案。但也许这可以帮助你。 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'
                 });
         }});

【讨论】：