JQuery可拖拽和可拖拽的追加問題

我想拖動一個div到可放置的div並讓可放置的div'包含它'，而初始可拖動的div仍然可以在可拖拽內拖動。JQuery可拖拽和可拖拽的追加問題

然而，

當我拖動可拖動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)}); 
    } 
});

來源

2013-10-13 William

這是你在找什麼？ http://jsfiddle.net/ZkC2q/ – Sergio

關閉但不是，我想能夠拖動主機droppable div內的任何地方的內部div。您的版本將「浮動」到左側並限制垂直移動 – William

我在某一天前面臨這個問題。經過很多努力，我找到了一個解決方案。我簡單地刪除了可拖動元素，並在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' 
       }); 
     }});

來源

2013-10-30 18:16:34 Arijit

JQuery可拖拽和可拖拽的追加問題

回答

相關問題