我正在尝试获取拖放元素的占位符 ID。
在第一次拖放时我可以检索它，但是内容来自数据库并且大部分将被预先填充。
我现在面临的问题是，我找不到绑定(bind)的放置容器的id。
$('document').ready(init);
function init() {
$('[data-type]').bind('dragstart', function (event) {
event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
});
// bind the dragover event on the board sections
$('#header-container, #header-storage').bind('dragover', function (event) {
event.preventDefault();
//$(event.target).css({"background-color":"#AA0000"});
});
// bind the drop event on the board sections
$('#header-container, #header-storage').bind('drop', function (event) {
event.preventDefault();
var notecard = event.originalEvent.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(notecard));
var room = document.getElementById(event.target.id).parentNode;
console.log(room);
// Turn off the default behaviour
// without this, FF will try and go to a URL with your id's name
var $id = $(event.target).attr("data-element-id");
alert('you dropped ' + notecard + ' into '+$id+' but into what container i do not know? In header-container or storage container?');
});
}/* Customize container */
@media (min-width: 768px) {
.container {
padding-top: 20px;
}
}
.popover {
min-width:300px;
height:auto;
}
[data-type="column"] {
padding: 10px;
min-height: 30px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
.row-hightlight {
padding: 15px;
background-color: #C9C9C9;
border: 1px solid #FFFF33;
margin: 4px 0px;
}
[data-type="div"] {
padding: 15px;
background-color: rgba(194, 200, 230, 1);
border: 1px solid #000;
margin: 4px 0px;
max-width: 1022px;
}
.container-fluid {
padding: 30px;
background-color: #a4a4a4;
border: 1px solid red;
margin: 10px 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- row start -->
<div class="row">
<!-- col starts -->
<div class="col-md-3">
<!-- panel starts -->
<div id="storage" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Storage Container</h3>
</div>
<div id="header-storage" class="panel-body">
<!-- div Starts -->
<div class="clickMe " data-element-id="59" data-type="container" id="59" draggable="true">container</div>
</div>
</div>
<!-- panel ends -->
</div>
<!-- col ends -->
<!-- board starts -->
<div id="header-container">
<div class="col-md-9">
<!-- div Starts -->
<div class="clickMe " data-element-id="43" data-type="div" id="43" draggable="true">
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="57" data-type="container" id="57" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="52" data-type="div" id="52" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="60" data-type="row" id="60" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="54" data-type="container" id="54" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="55" data-type="div" id="55" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="56" data-type="row" id="56" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="44" data-type="container" id="44" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="45" data-type="row" id="45" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="51" data-type="column" id="51" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="49" data-type="column" id="49" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="50" data-type="row" id="50" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="47" data-type="column" id="47" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="48" data-type="column" id="48" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="53" data-type="div" id="53" draggable="true"></div>
<!-- div Ends -->
</div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="46" data-type="column" id="46" draggable="true"></div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- container Ends -->
</div>
<!-- div Ends -->
</div>
</div>
<!-- board ends -->
</div>
<!-- row ends -->
</div>最佳答案
在 var $id = $(event.target).attr("data-element-id"); 之后添加:
alert( $(event.target).closest('#header-container, #header-storage').attr('id'));
关于javascript - 获取占位符容器拖放的父 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25993488/