使用 Jquery 拖放

Question

我了解如何运行基本的拖放操作，网上有很多教程。但是，我需要实现的是拖动一个元素，例如列表中的一个项目。但是当我把这个元素放到一个目标 DIV 中时，我需要其他的东西被拖放，它们是被拖动元素的属性。

例如，我从 DIV1 拖动一个练习的名称，但是当我将它放到 DIV2 中时，我将练习的图像、描述、集合和代表拖放到它们各自的 div 中，这些 div 是父可放置 DIV2 的兄弟。

Answer 1

您可以使用 jquery UI 来完成此任务。

jQuery UI 代码（Javascript）：

<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>

HTML 代码：

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

您也可以参考jquery ui。