[英]Cannot get interact.js drag & drop interactions to work with Boostrap elements
我正在尝试使用interact.js来处理Bootstrap列表项。 我有一个非常简单的设置,但不幸的是我无法让它工作。
HTML(div包含两个Bootstrap面板 - 一个带有一些可拖动的列表项,另一个带有两个dropzones):
<div id="visualizer-panel">
<div class="leftStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Draggables</h4>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item draggable">asdf</li>
<li class="list-group-item draggable">bbq</li>
</ul>
</div>
</div>
<div class="rightStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Drop Areas</h4>
</div>
<div class="panel-body">
<div class="dropzone">drop stuff here</div>
<div class="dropzone">drop more stuff here</div>
</div>
</div>
</div>
CSS:
#visualizer-panel .leftStuff {
float: left;
}
#visualizer-panel .rightStuff {
float: right;
}
/* Visual cursor hint for draggable */
#visualizer-panel .draggable:hover {
cursor: move;
}
/* Drag & Drop */
#visualizer-panel .draggable {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target { background-color: #29e; }
和Javascript:
// Initialize Interact.js Drag & Drop
interact('.draggable').draggable({
inertia: true,
restrict: {
restriction: "#visualizer-panel",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onend: function(event) {
console.log(event);
}
});
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
// add / remove dropzone feedback
ondropactivate: function (event) {
event.target.classList.add('drop-active');
},
ondropdeactivate: function (event) {
event.target.classList.remove('drop-active');
},
// add / remove dropzone feedback
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
},
ondragleave: function (event) {
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
},
// drop successful
ondrop: function (event) {
console.log(event);
}
});
这是上面代码的jsfiddle链接: http : //jsfiddle.net/hf27hn0c/6/
如您所见,无法将列表项拖放到放置区中。 我知道我可能不得不在拖动开始时手动从父列表中删除项目,但是现在我甚至无法使各种dragenter
, dragleave
或关键的ondrop
事件正常工作。
有任何想法吗? 谢谢。
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
...
你需要在dropzone上重叠1%的draggable才有资格获得下降。 由于没有移动拖拽,因此不会发生重叠。
该解决方案是增加一个dragmove
移动拖动或者改变悬浮窗对重叠'pointer'
。 http://jsfiddle.net/hf27hn0c/7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.