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可拖拽+可拖拽 - 物理移动拖拽项目到被拖拽的容器

回答

相关问题