无法获取interact.js拖动&放弃交互以使用Boostrap元素
Cannot get interact.js drag & drop interactions to work with Boostrap elements
我正在尝试让interact.js使用Bootstrap列表项。我有一个非常简单的设置,但不幸的是我无法让它工作。
HTML(div包含两个Bootstrap面板,一个包含一些可拖动的列表项,另一个包含两个dropzone):
<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,
...
你需要在降落区上有1%的可拖动部分重叠才能获得降落资格。因为可拖动对象没有被移动,所以重叠永远不会发生。
解决方案是添加一个dragmove
来移动可拖动区域或将放置区域的重叠更改为'pointer'
。http://jsfiddle.net/hf27hn0c/7/
相关文章:
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- Javascript没有't更新DOM,直到用户交互
- angularjs路线过渡如何以交互方式设置动画
- 用于编写与我作为客户端查看的网页交互的脚本的术语(如果有的话)是什么
- 为什么在这个例子中放弃“这个”是有益的
- 将broccoliJS与当前使用requireJS的模块化主干应用程序结合使用,我想完全放弃requireJS
- 交互.js拖动的项目移动到顶部
- Jquery keep Alive/任何客户端交互
- 制作一个高阶组件,用TypeScript实现反应中继和反应路由器的交互操作
- Noob web开发人员希望添加web设计和交互
- 交互和目标保存冻结应用程序
- 使用JavaScript验证用户交互/输入-这是一种很好的方法
- 如何在Slack API中与事件交互
- Bug修复放弃了Firefox插件Wikilook
- svg.js/svg平移缩放-双击交互
- 交互2个单选按钮2个不同的功能Javascript
- 如何捕获jqueryDialog和Parent之间的交互
- 没有与SVG交互
- p: inputText和p:在IE 10上选择OneMenu奇怪的交互
- 无法获取interact.js拖动&放弃交互以使用Boostrap元素