Javascript 不使用hammer.js的可拖动代码

我已经成功地实现了jQueryUI draggable，但只要添加hammer.js代码，draggable代码就不再有效

不是在我包含hammer.js之后，而是在我使用脚本之后

为什么会这样？我怎样才能让他们俩都工作

可拖动和液压锤均应用于

.dataCard

和

#main

可拖动的代码在这里运行良好（注释掉了hammer实现）：

以下是可拖动代码的示例：

$('#main').draggable({
    axis:'y',
    revert:true,
    start: function(event, ui){
        topValue = ui.position.top;
    },
    drag: function(event, ui){
            if(pastBreakpoint === false){
                $('#searchInput').blur();
                if(topValue > ui.position.top) return false;
            if(ui.position.top >= 161){
                if(pastBreakpoint === false){
                pastBreakpoint = true;
                    if($('.loadingRefresh').length === 0) $('#main').before('<div class="loadingRefresh"></div>');
                    else{
                    $('.loadingRefresh').remove();
                        $('#main').before('<div class="loadingRefresh"></div>');
                    }
                    $('.loadingRefresh').fadeIn();
                    $('#main').mouseup();
                    setTimeout(function(){
                       location.reload();
                    }, 1000);
                 }
              }
            }   
        }
    });

$（'#main'）。可拖动({
轴：'y'，
回复：对，
开始：功能（事件、用户界面）{
topValue=ui.position.top；
},
拖动：函数（事件、ui）{
if（过去断点===false）{
$（'#searchInput'）.blur（）；
if（topValue>ui.position.top）返回false；
如果（ui.position.top>=161）{
if（过去断点===false）{
pastBreakpoint=true；
如果（$（'.loadingRefresh'）.length==0）$（'#main'）。在（''）之前；
否则{
$（'.loadingRefresh'）.remove（）；
$（'main'）。在（''）之前；
}
$（'.loadingRefresh'）.fadeIn（）；
$（'#main'）.mouseup（）；
setTimeout（函数（）{
location.reload（）；
}, 1000);
}
}
}   
}
});

以下是未注释的hammer代码和无法使用的draggable代码：

以下是液压锤代码：

var hammertime = Hammer(document.getElementById('main'), {
    transform_always_block: true,
    transform_min_scale: 0
});

var posX = 0,
    posY = 0,
    lastPosX = 0,
    lastPosY = 0,
    bufferX = 0,
    bufferY = 0,
    scale = 1,
    last_scale = 1;


hammertime.on('touch transform transformend', function(ev) {

    if ((" " + ev.target.className + " ").indexOf(" dataCard ") < 0) return;

    else manageMultitouch(ev, ev.target); }); 

    function manageMultitouch(ev, element) { 

        switch (ev.type) { 
            case 'touch': 
                last_scale = scale;
                                return;
             case 'transform':
                scale = Math.min(last_scale * ev.gesture.scale, 10);
                break;
            }

            if(scale <= 0.5) $(element).hide('clip');

            if(scale > 1.0) $(element).addClass('focused');

            var transform = "translate(" + 0 + "px," + 0 + "px) " + "scale(" + 1 + "," + scale + ")";
            var style = element.style;
            style.transform = transform;
            style.oTransform = transform;
            style.msTransform = transform;
            style.mozTransform = transform;
            style.webkitTransform = transform;
     }  

var hammertime=Hammer（document.getElementById（'main'）{
变换\u始终\u块：真，
变换最小刻度：0
});
var posX=0，
posY=0，
lastPosX=0，
lastPosY=0，
bufferX=0，
bufferY=0，
比例=1，
最后一个刻度=1；
hammertime.on（'touch transform transformend'，功能（ev）{
如果（“+ev.target.className+”）.indexOf（“数据卡”）<0）返回；
多点触摸（ev，ev.target）；}；
函数管理器多点触摸（ev，元素）{
开关（电动类型）{
案例“接触”：
最后一个刻度=刻度；
返回；
“转换”案例：
刻度=数学最小值（最后一个刻度*电动手势刻度，10）；
打破
}
if（比例1.0）$（元素）.addClass（'focused'）；
var transform=“translate（“+0+”px，“+0+”px）”+“scale”（“+1+”，“+scale+”）；
var style=element.style；
style.transform=转换；
style.oTransform=变换；
style.msTransform=转换；
style.mozTransform=转换；
style.webkitttransform=转换；
}  

我的应用程序中也有同样的问题，即使包括了触摸打孔。我必须做一个很好的研究来找出停止jQueryUI拖动的问题所在。 出现的问题是在事件（仅当包含hammer时）更改jQueryUI中触发器方法的结果时设置了一个默认值

好吧，让我们再回头看一看： 您应该看到的第一个方法是

\u mouseMove（）

，它与mouseMove事件相连接。 只有当条件

（this.\u mouseStart（this.\u mouseDownEvent，event）！==false）

为真时，才会触发拖动

_mouseMove: function (event) {
    // IE mouseup check - mouseup happened when mouse was out of window
    if ($.ui.ie && (!document.documentMode || document.documentMode < 9) && !event.button) {
        return this._mouseUp(event);
    }

    if (this._mouseStarted) {
        this._mouseDrag(event);
        return event.preventDefault();
    }

    if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
        this._mouseStarted =
            (this._mouseStart(this._mouseDownEvent, event) !== false);
        (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
    }

    return !this._mouseStarted;
}

下面是第一个名为的_触发器，它的from drag小部件

_trigger: function (type, event, ui) {
        ui = ui || this._uiHash();
        $.ui.plugin.call(this, type, [event, ui]);
        //The absolute position has to be recalculated after plugins
        if(type === "drag") {
            this.positionAbs = this._convertPositionTo("absolute");
        }
        return $.Widget.prototype._trigger.call(this, type, event, ui);
    }

此时，结果将调用另一个触发器方法（这次来自$.Widget），这就是问题所在

 _trigger: function (type, event, data) {
    var prop, orig,
        callback = this.options[type];

    data = data || {};
    event = $.Event(event);
    event.type = (type === this.widgetEventPrefix ?
        type :
        this.widgetEventPrefix + type).toLowerCase();
    // the original event may come from any element
    // so we need to reset the target on the new event
    event.target = this.element[0];

    // copy original event properties over to the new event
    orig = event.originalEvent;
    if (orig) {
        for (prop in orig) {
            if (!(prop in event)) {
                event[prop] = orig[prop];
            }
        }
    }
    return !($.isFunction(callback) && callback.apply(this.element[0], [event].concat(data)) === false || event.isDefaultPrevented());
}

return !($.isFunction(callback) && callback.apply(this.element[0], [event].concat(data)) === false || event.isDefaultPrevented());

我们的问题就在这条线上。更具体的是

事件之前的| | isDefaultPrevented（）

。 当包含hammer时，方法

event.isDefaultPrevented（）

的结果为true，一旦该值在返回之前被拒绝，最终值将为false。 （如果未包含锤子，则

事件。isDefaultPrevented（）

按预期返回false。） 支持我们的

\u mousemouve（）

，而不是调用

\u mouseDrag（）

方法，它将调用

\u mouseUp（）

。 您可以看到它将解除事件绑定并调用

\U mouseStop（）

_mouseUp: function (event) {
    $(document)
        .unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
        .unbind("mouseup."+this.widgetName, this._mouseUpDelegate);

    if (this._mouseStarted) {
        this._mouseStarted = false;

        if (event.target === this._mouseDownEvent.target) {
            $.data(event.target, this.widgetName + ".preventClickEvent", true);
        }

        this._mouseStop(event);
    }

    return false;
}

如果通过AND（&&）更改OR（| |）运算符，它将正常工作。当然这不是一个小的变化，我一直在测试它，直到现在我还没有发现任何问题。线路如下所示：

return !($.isFunction(callback) && callback.apply(this.element[0], [event].concat(data)) === false && event.isDefaultPrevented());

正如我所说，它不是100%安全的，但直到现在我还没有找到理由保留| |而不是&。我会继续测试几天。

---

此外，我已经从jQueryUI向首席开发人员发送了一封电子邮件询问此事。

我也遇到了同样的问题，并在上找到了这个问题

所示的使用事件委派的解决方案对我来说效果很好：

$(document).hammer().on('touch transform transformend', '#main', function() {...});

---

我在使用同构smartclient时遇到了类似的问题

我通过处理启动事件并将isDefaultPrevented重置为false来修复它

$(element).draggable({
  start: function (event, ui) {
    event.isDefaultPrevented = function () { return false; }
  }
});

---

开发人员有没有回复过你？不幸的是没有，我发了两封电子邮件，但没有得到任何回复。但是我保留了这一改变，到目前为止我没有发现任何问题。我对它的惊人性、努力和抖动投了赞成票。我在这个解决方案中遇到了一个问题。在我们的例子中，当hammer未处于活动状态（在非触摸设备上）时，此代码将阻止启动回调正常工作。特别是，如果我们在开始回调中返回false，它现在将被忽略，除非同时调用event.preventDefault，jQuery、jQueryUI和hammerJS的哪个版本正在使用？这对我来说很有效，但必须使用“拖动”回调，而不是开始

$(element).draggable({
  start: function (event, ui) {
    event.isDefaultPrevented = function () { return false; }
  }
});