长话短说
我想通过拖动 Hammer.js 事件使用 HTML5 将元素拖放到容器中。但是,存在冲突。
详细说明:
如附图所示,我有两个容器:
- 左:包含可拖动元素的容器
- 右:包含 Hammer.js 事件的容器,即 drag、dragstart 和 dragend。
我想将元素从左侧容器拖放到右侧容器。 但是,在拖动时,当进入右侧容器时,会激活 Hammer.js dragstart 事件。放下元素后,我在右侧容器上应用拖动事件。但是,Hammer.js 拖动事件已激活,它会考虑来自前一个 dragstart 事件的 deltaX 和 deltaY。
Hammer.js 与 preventDefault: true 一起使用:
Hammer(this.container, {preventDefault: true}).on('dragstart', function (event) { ... }
我已经在可拖动元素的 dragstart 上使用了 event.preventDefault() 和 event.stopPropagation(),但没有成功。
我也部分解决了这个问题。在 Hammer.js 容器的 dragstart 事件中,我添加了以下验证,以检查源元素和目标元素是否相同。但是,右侧容器中的拖动仅适用于第二个操作,因为第一个操作被忽略了。
if (event.gesture.startEvent.srcEvent.srcElement != event.gesture.target) {
return false;
}
知道如何在使用 HTML5 拖放 API 拖动元素时防止 Hammer.js 事件吗?
我想使用标志作为最后的手段,因为 Hammer.js 事件应该由第三方开发。
感谢您的帮助。
最佳答案
Hammer.js 事件只有在它们之前已经绑定(bind)时才应该被捕获。
尝试使用 case 语句...(这是我最近构建的一个应用程序)我可以 case 该语句然后 break 或 return false 等来防止事情发生。不过从理论上讲,如果我解除绑定(bind)或排除事件“拖动”,它应该仍然有效。
<script>
var hammertime = Hammer(document.getElementById('image-wrapper'), {
transform_always_block: true,
transform_min_scale: window.initScale,
transform_max_scale: 1,
drag_block_horizontal: true,
drag_block_vertical: true,
drag_min_distance: 0
});
//console.log(hammertime);
var posX = window.calcLeft, posY = window.calcTop,
lastPosX = window.calcLeft, lastPosY = window.calcTop,
bufferX = 0, bufferY = 0,
scale = window.initScale, last_scale,
rotation = window.rotationNeeded, last_rotation, dragReady = 0;
hammertime.on('touch drag dragend transform release mouseleave transformend pinchin pinchout', function (ev) {
elemRect = document.getElementById('the-image');
manageMultitouch(ev);
});
function manageMultitouch(ev) {
var pinchDirection;
ev.stopPropagation();
//console.log(ev.type);
switch (ev.type) {
case 'touch':
last_scale = scale;
last_rotation = rotation;
break;
case 'drag':
posX = ev.gesture.deltaX + lastPosX;
posY = ev.gesture.deltaY + lastPosY;
break;
case 'pinchin':
console.log('pinchin');
pinchDirection = "in";
break;
case 'pinchout':
console.log('pinchout');
pinchDirection = "out";
break;
case 'transform':
rotation = window.rotationNeeded;// rotation + ev.gesture.rotation;//we can change this to snap rotation eventually.
//console.log('Last Scale: ', last_scale);
scale = Math.max(hammertime.options.transform_min_scale, Math.min(last_scale * ev.gesture.scale, 1));
var propsImage = document.getElementById('the-image').getBoundingClientRect();
//console.log(propsImage);
var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();
//console.log(propsBox);
break;
case 'transformend':
console.log('We are finished transforming.');
//when they finish transforming, we need to determinw what the new left reset position would be.
var propsImage = document.getElementById('the-image').getBoundingClientRect();
var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();
//window.calcLeft = Math.round(window.preBounds.left - propsImage.left);
//console.log(ev.type);
//if (pinchDirection = "out") {
window.calcLeft = Math.round(window.calcLeft + ((propsImage.width - propsBox.width) / 2));
//} else if (pinchDirection = "in") {
//window.calcLeft = Math.round(window.calcLeft - ((propsImage.width - propsBox.width) / 2));
//}
//window.calcTop = Math.round(window.calcTop + ((propsImage.top - propsBox.top) / 2));
//console.log(window.calcLeft);
break;
case 'dragend':
//console.log('We are finished dragging.');
//console.log(window.calcLeft);
lastPosX = posX;
lastPosY = posY;
checkBounds();
break;
case 'mouseleave':
//console.log('Release!', posX, posY);
//checkBounds();
break;
}
<script>
关于javascript - 使用 Hammer.js 拖动事件将 HTML5 元素拖放到 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24337115/