Question

我的目标是检测元素何时到达某个边距，然后解除绑定或停止panmove如果达到该阈值则继续。我有一个使用hammer.js和jquery hammer插件绑定到元素的“panmove”。我注意到，在panmove中，当你移动元素时，console.log（e）将会发射数百次，这是预期的。但是，如果你在panmove函数中添加了一个if语句，它只会脱离第一个panmove的初始状态而不是当前状态。

.bind("panmove", function (e) {
    var count = 0;
    console.log(e);
    console.log(count++);
    var _this = $(e.target);
    var _thisDataLeft = _this.attr("data-left");
    var _thisDataMaxLeft = _this.attr("data-maxleft"); // this is derived from the width of the Delete box, which can be any width. 
    if (Math.abs(_thisDataLeft) < Number(_thisDataMaxLeft)) {
        _this.css({ left: Number(_thisDataLeft) + e.gesture.deltaX }); // controls movement of top layer
        console.log(count++);
    }

我注意到console.log（count ++）总是触发1，而不是迭代，好像它只是在开头读一次。如何在此Pan内部运行if语句，以便始终是当前信息，而不仅仅是第一次迭代？

Answer 1

结束离开Hammer.js，无法得到我需要的结果。看起来更基本的jquery.event.move.js比锤子更容易使用。

这是我在js小提琴中的例子 https://jsfiddle.net/williamhowley/o9uvo50y/

$(document).ready(function () {
    // http://stephband.info/jquery.event.move/
    // http://stephband.info/jquery.event.swipe/
    // add swipe functionality to the rows.
    // I think you will need to add the swipe left, after it is activated by a HOLD down press. 
    // idk, how do you always make something swipable. 

    var wrap = $('ul#main');


    $('ul#main > li')
    .on('movestart', function (e) {
        console.log("move start");

        // var $li = $(e.target).closest('.swipable'); // this would be normal live integration
        var $li = $(e.target);
        if ($li.attr("data-hasplaceholder") !== "true") { // if it does not have a placeholder, add one.
            createBackgroundSpacer($li);
            $li.attr("data-hasplaceholder", true); // signify that a placeholder has been created for this element already. 
        }

        // If the movestart heads off in a upwards or downwards
        // direction, prevent it so that the browser scrolls normally.
        if ((e.distX > e.distY && e.distX < -e.distY) ||
            (e.distX < e.distY && e.distX > -e.distY)) {
            e.preventDefault();
            return;
        }

        // To allow the slide to keep step with the finger,
        // temporarily disable transitions.
        wrap.addClass('notransition'); // add this to the container wrapper. 
    })
    .on('move', function (e) {
        // event definitions
        // startX : 184, where from left the mouse curser started.
        // deltaX: ?
        // distX: how far the mouse has moved, if negative moving left. Still need to account for double movement, currently can only handle one movement. 

        console.log("move");
        console.log(e);

        var maxLeft = $('.rightContent').width();
        var marginLeftNum = Number($(this).css('margin-left').replace(/[^-\d\.]/g, ''));

        if (marginLeftNum <= -maxLeft && e.deltaX < 0) { // Case when user is at outermost left threshold, and trying to move farther left.  
            $(this).css({ 'margin-left': -maxLeft });
        }
        else if (marginLeftNum == -maxLeft && e.deltaX > 0) { // When user is at threshold, and trying to move back right. 
            $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
        }
        else if (e.target.offsetLeft>=0 && e.deltaX>0) { // If the offset is 0 or more, and the user is scrolling right (which is a positive delta, than limit the element. )
            $(this).css({ 'margin-left': 0 });
        }
         // Must have a Negative offset, and e.deltaX is Negative so it is moving left. 
        else if (e.deltaX < 0) { // Case when element is at 0, and mouse movement is going left. 
            $(this).css({ 'margin-left': marginLeftNum + e.deltaX }); 
        }
        else {  // Moving Right when not on 0
            $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
        }



    })
    .on('swipeleft', function (e) {
        console.log("swipeleft");
    })
    .on('activate', function (e) {
        // not seeing this activate go off, i think this is custom function we can add on if swipe left hits a threshold or something. 
        console.log("activate");
    })
    .on('moveend', function (e) {
        console.log("move end");
        wrap.removeClass('notransition');
     });



    var createBackgroundSpacer = function ($shoppingListRow) {
        var border = 2;

        $shoppingListRow.css({ 'width': $shoppingListRow.width() + border, 'height': $shoppingListRow.height() + border });  // gives itself set width and height
        $shoppingListRow.addClass('swipable');

        // placeholder HTML
        var leftPlaceholder = $('<div class="leftPlaceholder"></div>').css({ 'height': $shoppingListRow.height()});
        var rightPlaceholder = $('<div class="rightPlaceholder"></div>')
        var rightContent = $('<div class="rightContent">Delete</div>').css({ 'height': $shoppingListRow.height()});
        rightPlaceholder.append(rightContent);
        var placeHolder = $('<div class="swipePlaceholder clearfix"></div>'); // goes around the two floats. 
        placeHolder.css({ 'width': $shoppingListRow.width(), 'height': $shoppingListRow.height() });
        placeHolder.append(leftPlaceholder, rightPlaceholder);

        $shoppingListRow.before(placeHolder); // adds placeholder before the row.
        $shoppingListRow.css({ 'marginTop': -($shoppingListRow.height() + border) });
    };

});

hammer.js检测panmove中的变量，并在达到某个标准时解除绑定

1 个答案: