javascript-无法获取interact.js拖放交互以使用Boostrap元素
作者:互联网
我正在尝试让interact.js与Bootstrap列表项一起使用.我有一个非常简单的设置,但不幸的是我无法使它正常工作.
HTML(div包含两个Bootstrap面板-一个带有一些可拖动的列表项,另一个带有两个拖放区):
<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/
如您所见,无法将&将列表项放到dropzones中.我了解到,在拖动开始时,我可能必须手动从父级列表中删除项目,但是现在我什至无法使各种Dragenter,Dragleave或关键的ondrop事件正常工作.
有任何想法吗?谢谢.
解决方法:
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
...
您需要在拖放区上重叠1%的可拖动对象,才有资格进行拖放.因为可拖动对象没有移动,所以重叠永远不会发生.
解决方案是添加一个拖动移动来移动可拖动对象或将放置区的重叠更改为“指针”. http://jsfiddle.net/hf27hn0c/7/
标签:twitter-bootstrap,drag-and-drop,interact-js,javascript,jquery 来源: https://codeday.me/bug/20191120/2045851.html