HTML5使用Hammer.js拖放事件拖放div上的元素

Question

TL; DR

我想使用HTML5拖放元素拖放到容器中,拖动Hammer.js事件.但是,存在冲突.

详细说明:

如附图所示,我有两个容器:

1. 左:具有可拖动元素的容器
2. 右:带有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) { ... }

我已经在draggable元素的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事件应由第三方开发.

谢谢你的帮助.

Answer 1

Hammer.js 事件只有在先前已绑定的情况下才应被捕获。

尝试使用 case 语句...（这是来自我最近构建的应用程序）我可以 case 语句然后中断或返回 false 等以防止出现问题。但从理论上讲，如果我取消绑定或排除事件“拖动”，它无论如何都应该起作用。

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