HTML5拖放元素在带有Hammer.js拖动事件的div上

Question

TL;DR

我想利用HTML5的拖放功能，将元素拖到带有Hammer.js事件的容器中。但是会出现冲突。

详细描述：

如附图所示，有两个容器：

1. 左侧：带有可拖动元素的容器
2. 右侧：带有Hammer.js事件的容器，即拖拽（drag）、拖拽开始（dragstart）和拖拽结束（dragend）。

我想将左侧容器中的元素拖放到右侧容器中。但是，在拖动时，进入右侧容器时，Hammer.js拖拽开始事件就被触发了。在元素被放下后，我在右侧容器上应用了拖拽事件。但是，Hammer.js拖拽事件仍然被激活，并且它会考虑前一个拖拽开始事件的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事件吗？

我希望只在万不得已时才使用标志(flag)，因为Hammer.js事件应该由第三方开发者开发。

谢谢你的帮助。

- David Campos

---

你已经找到解决方案了吗？ - Thurein

Answer 1

只有绑定了 Hammer.js 事件才能捕获它们。

尝试使用 case 语句…（这是我最近编写的一个应用程序）我可以对 case 语句进行分支或者使用 break 或 return false 等来阻止事件执行。理论上，即使将“drag”事件解除绑定或排除掉，它仍然应该能正常工作。

<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>

- Judson Terrell