无法获得 interact.js 拖放交互以使用 Bootstrap 元素
Cannot get interact.js drag & drop interactions to work with Boostrap elements
我正在尝试让 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 link:http://jsfiddle.net/hf27hn0c/6/
如您所见,无法将列表项拖放到拖放区中。我知道我可能必须在拖动开始时手动从父列表中删除项目,但现在我什至无法获得各种 dragenter
、dragleave
或关键 ondrop
事件正常工作。
有什么想法吗?谢谢。
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
...
您需要在拖放区上重叠 1% 的可拖放对象才有资格进行拖放。因为 draggables 没有被移动,重叠永远不会发生。
解决方案是添加一个 dragmove
来移动可拖动对象或将拖放区的重叠更改为 'pointer'
。 http://jsfiddle.net/hf27hn0c/7/
我正在尝试让 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 link:http://jsfiddle.net/hf27hn0c/6/
如您所见,无法将列表项拖放到拖放区中。我知道我可能必须在拖动开始时手动从父列表中删除项目,但现在我什至无法获得各种 dragenter
、dragleave
或关键 ondrop
事件正常工作。
有什么想法吗?谢谢。
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
...
您需要在拖放区上重叠 1% 的可拖放对象才有资格进行拖放。因为 draggables 没有被移动,重叠永远不会发生。
解决方案是添加一个 dragmove
来移动可拖动对象或将拖放区的重叠更改为 'pointer'
。 http://jsfiddle.net/hf27hn0c/7/