我有一个div1，我在其上应用了ondrag，它正在工作，即拖动要调用处理程序的元素，并且我将目标元素作为该特定div1获取。现在，将div1拖动到其他div（例如5 div）上时，就可以确定div1在其上拖动的其他div的ID。例如，我有此代码：
<html>
<head>
<style>
.design {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div style="width: 100px; height: 35px;border: 1px solid #aaaaaa;" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</div>
<div class="design" ></div>
<script>
/* Events fired on the drag target */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
}
</script>
</body>
</html>
但是这里我有一个限制，我不能在已应用的两个div之外的任何div上使用拖动事件，但是我可以使用mouseevent谢谢
由于没有代码示例，因此我们将无法为您提供有助于您的代码响应。也就是说，您可以从此链接开始阅读以了解放置目标和碰撞检测。
https://javascript.info/mouse-drag-and-drop#potential-drop-targets-droppables
[如果您希望拖放功能，并检查要拖动哪个div以及将其拖放到哪个div，则可以使用jquery可排序ui插件。让我们假设我有Ledpipeline页面，在该页面上我有四个管道阶段sortable10，sortable 11，12和13，因此我在下面的代码中使用，希望这对您有帮助。
<ul class="ui-sortable defaultscroll" id="sortable-10">
<li data-LeadID="L1">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Contact Made</h4>
<span id="ContactMadeCount">0</span>
<i class="mdi mdi-contacts"></i>
</div>
<ul id="sortable-11" class="ui-sortable defaultscroll">
<li data-LeadID="L2">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Meeting Arranged</h4>
<span id="MeetingArrage">0</span>
<i class="mdi mdi-account-multiple"></i>
</div>
<ul id="sortable-12" class="ui-sortable defaultscroll">
<li data-LeadID="L3">
<div class='leadpilinelist'>
<p class='leadpname'>John Doe</p>
<div class='selrdurationbox'>
<span class="selerlead">Seller :</span>
<span class='slerleadname'></span>
</div>
<div class='selrdurationbox'>
<span class='selerlead'>Duration :</span>
<span class='slerleadname'></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Proposal Made</h4>
<span id="ProposalCounter">0</span>
<i class="mdi mdi-file"></i>
</div>
<ul id="sortable-13" class="ui-sortable defaultscroll">
<li data-LeadID="L4">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function ChangeStage(SenderDiv, RecieveOnStage, LeadID) {
alert ("DraggedDiv :"+SenderDiv + "RecievedonWhichDiv :" + RecieveOnStage + "AttributeID value dragged div :" +LeadID);
}
$(document).ready(function() {
$("#sortable-10").sortable({
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
connectWith: ".ui-sortable",
});
$("#sortable-11").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-12").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-13").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
});
</script>