jQuery可拖拽+可拖拽 - 物理移動拖拽項目到被拖拽的容器

我需要能夠將一個被設置爲可拖拽的元素並物理地將該元素移動到容器中，而不是像當前功能那樣覆蓋它。jQuery可拖拽+可拖拽 - 物理移動拖拽項目到被拖拽的容器

因此，例如：

<div class="container"></div> 
<div class="image"> 
    <img class="thumb" src="images/Koala.jpg" alt="" /> 
</div> 

$(function() { 
    $(".image").draggable(); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      alert('dropped!'); 
     } 
    }); 
});

所以後的圖像已經拖放到「容器」我DIV需要在此進行移動的實際html元素。

所以，事件發生後，如果我使用Chrome的開發工具，從源頭上看起來我會看到：

<div class="container"> 
    <div class="image"> 
     <img class="thumb" src="images/Koala.jpg" alt="" /> 
    </div> 
</div>

這可能嗎？

感謝

來源

2012-07-30 Jared

在源視圖中，您永遠不會看到JS對dom的更改。儘管您可能會在瀏覽器的開發工具中看到更改。 – DanielB 2012-07-30 16:38:20

是的，我的意思是。我會修改我的問題。 – Jared 2012-07-30 16:39:28

這應該拖動的元素移到可在dom樹中放置。

drop: function (event, ui) { 
    $(this).append(ui.draggable); 
}

來源

2012-07-30 16:57:08 DanielB

這確實把它放在DOM對象中，但是（請參閱我的示例答案），可拖動的部分留下了CSS，將它放在容器外面。 – saluce 2012-07-30 17:04:37

@saluce：這取決於可能已存在的CSS定義。也許OP有一個定義，讓所有圖像都浮在.container中，然後他不需要設置任何額外的CSS。 – DanielB 2012-07-31 08:15:51

在下拉功能，$(this)是可放開接受拖動，因此只使用.append()的可拖動添加可投放：http://jsfiddle.net/saluce/P6TjC/

$(function() { 
    $(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      $(this).append(ui.draggable.css({position: 'static'})); 
      alert('dropped!'); 
     } 
    }); 
});

來源

2012-07-30 16:56:59 saluce

'靜態'會導致繼續拖動元素時出現問題。我用：$（this）.append（ui.draggable.css（{position：「relative」，top：「」，left：「」}））; – Florian 2012-11-14 20:21:06

jQuery可拖拽+可拖拽 - 物理移動拖拽項目到被拖拽的容器

回答

相關問題