jquery - 如何使用jquery拖放内容

Question

Here是 fiddle 。 我尝试将 hello 拖放到 div 标签中。它成功了。现在如何将相同的 hello 放到另一个 div 标签中。如果下降目标不止一个，我们如何下降超过目标？

Answer 1

不要使用 id 定位放置区域，而是使用 classname 定位它。这将解决所有问题。所以下面将是变化:

$(document).ready(function()
{
	var data1;
	$(".draggable").bind('drag',function(event)
	{ 
		data1=event.target.id; 
	});
	$(".droppable").on("dragover",function(event){
		event.preventDefault();
		event.stopPropagation();
	});
	$(".droppable").on("dragleave",function(event){
		event.preventDefault();
		event.stopPropagation();
	});
	$(".droppable").on("drop",function(event)
	{
		event.preventDefault();
		var d=document.getElementById(data1).innerHTML;
		event.target.innerHTML=event.target.innerHTML+d;
	});
});

.droppable {width:200px;height:auto;padding:5px;border:2px solid #915C83;min-height: 15px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="droppable" name="ans"></div>
<div id="div2" class="droppable" name="ans"></div>
<div id="div3" class="droppable" name="ans"></div>
<div id="div4" class="droppable" name="ans"></div>
<div class="draggable" draggable="true" id="drag1">Hello</div>

DEMO