好吧，所以我试图制作一个用于书签和此类之类的Pinbar。现在，我正在尝试添加一个用于将项目添加到pinbar的下拉圆圈。我已经使进入固定框的所有项目都可以与特定目标一起拖动。我不知道如何使“下车”圆圈成为目标，但如何将物品仍推入针杆而不是卡在圆圈内。
HTML
<html>
<body>
<div class="page" data-draggable="target">
<!-- bubbles on page -->
<ul data-draggable="target" id="dataList">
<li data-draggable="item" class="testbud" id="testbud4"></li>
<li data-draggable="item" class="testbud" id="testbud4"></li>
<li data-draggable="item" class="testbud" id="testbud4"></li>
<li data-draggable="item" class="testbud" id="testbud4"></li>
<li data-draggable="item" class="testbud" id="testbud3"></li>
<li data-draggable="item" class="testbud" id="testbud2"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
<li data-draggable="item" class="testbud" id="testbud1"></li>
</ul>
<div class="tabs">
<div class="tab-item active"><a href="#" data-target="#tab-1">Pinned</a>
</div>
<div class="tab-item">
<a href="#" data-target="#tab-2" id="recentTab">Recent</a>
</div>
<div class="tab-pane">
<div class="tab-content active" id="tab-1" data-draggable="target"></div>
<div class="tab-content" id="tab-2" data-draggable="target">
<div class="rpin-container"></div>
</div>
</div>
</div>
</div>
</body>
</html>
JS
(function() {
for (var items = document.querySelectorAll('[data-draggable="item"]'),len = items.length, i = 0; i < len;i++) {
items[i].setAttribute("draggable", "true");
}
var item = null;
document.addEventListener("dragstart",function(e) {
item = e.target;
e.dataTransfer.setData("text", "");
},false);
document.addEventListener("dragover",function(e) {
if (item) {
e.preventDefault();
}
},false);
document.addEventListener("drop", function(e) {
if (e.target.getAttribute("data-draggable") == "target") {
e.target.appendChild(item);
e.preventDefault();
}
},false);
document.addEventListener("dragend", function(e) {
item = null;
},false);
})();