Question

TL; DR

我想使用HTML5将元素拖放到带有Hammer.js拖动事件的容器中。但是，存在冲突。

详细说明：

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

左：带有可拖动元素的容器
右：包含Hammer.js事件的容器，即drag，dragstart和dragend。

enter image description here

我想将左侧容器中的元素拖放到右侧容器中。但是，在拖动时，当进入正确的容器时，会激活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语句...（这是我最近构建的应用程序）我可以将语句断开或返回false等以防止事情发生。从理论上讲，如果我解开或排除事件＆＃34;拖动＆＃34;无论如何它应该有效。

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

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

1 个答案: