Kunt u “slepen” in jQuery detecteren?

Ik heb een throomber die verschijnt wanneer een gebruiker op een link klikt.

Het probleem is dat diezelfde link kan worden geklikt en gesleept om te worden herschikt. In dit geval zou ik niet de throbber nodig hebben om te verschijnen. Het hoeft alleen maar te verschijnen als het daadwerkelijk wacht om ergens heen te gaan.

Hoe kan ik, met jQuery, een gebeurtenis-luisteraar creëren die alleen een throbber toestaat om te lijken als het een klik via een link , en geen klik en slepen?

Antwoord 1, Autoriteit 100%

Op Mousedown, Start de staat in, als de MuisMove-gebeurtenis is afgevuurd, neem dan ten slotte op MUIDEUP, of de muis verplaatst. Als het verhuisde, slepen we. Als we niet zijn verplaatst, is het een klik.

var isDragging = false;
$("a")
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        $("#throbble").toggle();
    }
});

Hier is een demo: http://jsfiddle.net/w7tvd/1399/

Antwoord 2, Autoriteit 11%

Om een ​​of andere reden werkten de bovenstaande oplossingen niet voor mij. Ik ging met het volgende:

$('#container').on('mousedown', function(e) {
    $(this).data('p0', { x: e.pageX, y: e.pageY });
}).on('mouseup', function(e) {
    var p0 = $(this).data('p0'),
        p1 = { x: e.pageX, y: e.pageY },
        d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
    if (d < 4) {
        alert('clicked');
    }
})

Je kunt de afstandslimiet aanpassen aan wat je maar wilt, of zelfs helemaal naar nul brengen.

Antwoord 3, autoriteit 9%

Doe dit gewoon met jQuery UI!

$( "#draggable" ).draggable({
  start: function() {
  },
  drag: function() {
  },
  stop: function() {
  }
});

Antwoord 4, autoriteit 2%

$(".draggable")
.mousedown(function(e){
    $(this).on("mousemove",function(e){
        var p1 = { x: e.pageX, y: e.pageY };
        var p0 = $(this).data("p0") || p1;
        console.log("dragging from x:" + p0.x + " y:" + p0.y + "to x:" + p1.x + " y:" + p1.y);
        $(this).data("p0", p1);
    });
})
.mouseup(function(){
    $(this).off("mousemove");
});

Deze oplossing gebruikt de functies “aan” en “uit” om een unbind te binden aan een mousemove-gebeurtenis (binden en unbinden zijn verouderd). U kunt ook de verandering in muis x- en y-posities tussen twee muisbewegingsgebeurtenissen detecteren.

Antwoord 5

Probeer dit: het laat zien wanneer de status ‘gesleept’ is. 😉
fiddle-link

$(function() {
    var isDragging = false;
    $("#status").html("status:");
    $("a")
    .mousedown(function() {
        $("#status").html("status: DRAGGED");        
    })
    .mouseup(function() {
        $("#status").html("status: dropped");   
    });
    $("ul").sortable();
});

Antwoord 6

Ik vertrok van het geaccepteerde antwoord naar alleen uitvoeren wanneer de klik ingedrukt en gesleept wordt.

Mijn functie was actief terwijl ik de muis niet ingedrukt hield. Hier is de bijgewerkte code als je deze functionaliteit ook wilt:

var isDragging = false;
var mouseDown = false;
$('.test_area')
    .mousedown(function() {
        isDragging = false;
        mouseDown = true;
    })
    .mousemove(function(e) {
        isDragging = true;
        if (isDragging === true && mouseDown === true) {
            my_special_function(e);
        }
     })
    .mouseup(function(e) {
        var wasDragging = isDragging;
        isDragging = false;
        mouseDown = false;
        if ( ! wasDragging ) {
            my_special_function(e);
        }
    }
);

Antwoord 7

Voor deze eenvoudigste manier is tik op start, tik op verplaatsen en tik op einde. Dat werkt voor zowel pc als aanraakapparaat. Controleer het gewoon in de jQuery-documentatie en hoop dat dit de beste oplossing voor u is. veel succes

Antwoord 8

jQuery-plug-in gebaseerd op het antwoord van Simen Echholt. Ik noemde het één klik.

/**
 * jQuery plugin: Configure mouse click that is triggered only when no mouse move was detected in the action.
 * 
 * @param callback
 */
jQuery.fn.singleclick = function(callback) {
    return $(this).each(function() {
        var singleClickIsDragging = false;
        var element = $(this);
        // Configure mouse down listener.
        element.mousedown(function() {
            $(window).mousemove(function() {
                singleClickIsDragging = true;
                $(window).unbind('mousemove');
            });
        });
        // Configure mouse up listener.
        element.mouseup(function(event) {
            var wasDragging = singleClickIsDragging;
            singleClickIsDragging = false;
            $(window).unbind('mousemove');
            if(wasDragging) {
                return;
            }
            // Since no mouse move was detected then call callback function.
            callback.call(element, event);
        });
    });
};

In gebruik:

element.singleclick(function(event) {
    alert('Single/simple click!');
});

^^

Antwoord 9

// here is how you can detect dragging in all four directions
var isDragging = false;
$("some DOM element").mousedown(function(e) {
    var previous_x_position = e.pageX;
    var previous_y_position = e.pageY;
    $(window).mousemove(function(event) {
        isDragging = true;
        var x_position = event.pageX;
        var y_position = event.pageY;
        if (previous_x_position < x_position) {
            alert('moving right');
        } else {
            alert('moving left');
        }
        if (previous_y_position < y_position) {
            alert('moving down');
        } else {
            alert('moving up');
        }
        $(window).unbind("mousemove");
    });
}).mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    $(window).unbind("mousemove");
});

Antwoord 10

Zorg ervoor dat u het kenmerk versleepbarevan het element instelt op falsezodat u geen bijwerkingen krijgt bij het luisteren naar mouseup-gebeurtenissen:

<div class="thing" draggable="false">text</div>

Vervolgens kunt u jQuery gebruiken:

$(function() {
  var pressed, pressX, pressY,
      dragged,
      offset = 3; // helps detect when the user really meant to drag
  $(document)
  .on('mousedown', '.thing', function(e) {
    pressX = e.pageX;
    pressY = e.pageY;
    pressed = true;
  })
  .on('mousemove', '.thing', function(e) {
    if (!pressed) return;
    dragged = Math.abs(e.pageX - pressX) > offset ||
              Math.abs(e.pageY - pressY) > offset;
  })
  .on('mouseup', function() {
    dragged && console.log('Thing dragged');
    pressed = dragged = false;
  });
});

Antwoord 11

Je moet een timer instellen. Wanneer de timer afloopt, start u de trilling en registreert u de klik. Als het slepen plaatsvindt, wis dan de timer zodat deze nooit wordt voltooid.

Antwoord 12

Als je jQueryUI gebruikt, is er een onDrag-gebeurtenis. Als dat niet het geval is, voeg dan uw luisteraar toe aan mouseup(), niet aan click().

Antwoord 13

U hoeft geen variabele in te stellen, u kunt alleen instellen of deze zich verplaatst in data-attribuut

$youtubeSlider.find('a')
    .on('mousedown', function (e) {
        $(this).data('moving', false);
    })
    .on('mousemove', function (e) {
        $(this).data('moving', true);
    })
    .on('mouseup', function (e) {
        if (!$(this).data('moving')) {
            // Open link
        }
    });

Antwoord 14

Ik had een functie nodig die altijd de muispositie bijhoudt en het slepen naar links, rechts, boven en onder detecteert. Het wordt ook niet geactiveerd bij een klik, maar heeft een beweging van minimaal 15px nodig

/**
 * Check for drag when moved minimum 15px
 * Same time keep track of mouse position while dragging
 */
// Variables to be accessed outside in other functions
var dragMouseX;
var dragMouseY;
var myDragging = false; // true or false
var dragDirectionX = false; // left or right
var dragDirectionY = false; // top or bottom
$(document).on("mousedown", function(e) {
    // Reset some variables on mousedown
    var lastDirectionCheck = e.timeStamp;
    var dragStartX = e.pageX;
    var dragStartY = e.pageY;
    dragMouseX = e.pageX;
    dragMouseY = e.pageY;
    myDragging = false;
    dragDirectionX = false;
    dragDirectionY = false;
    // On the move
    $(document).on("mousemove", function(e) {
        dragMouseX = e.pageX;
        dragMouseY = e.pageY;
        // Recalculate drag direction every 200ms in case user changes his mind
        if (e.timeStamp > (lastDirectionCheck + 200)) {
            dragStartX = dragMouseX;
            dragStartY = dragMouseY;
            lastDirectionCheck = e.timeStamp;
        }
        // Check for drag when moved minimum 15px in any direction
        if (!myDragging && Math.abs(dragStartX - dragMouseX) > 15 || Math.abs(dragStartY - dragMouseY) > 15) {
            myDragging = true;
        }
        if (myDragging) {
            // Check drag direction X
            if (dragStartX > dragMouseX) dragDirectionX = 'left';
            if (dragStartX < dragMouseX) dragDirectionX = 'right';
            // Check drag direction Y
            if (dragStartY > dragMouseY) dragDirectionY = 'top';
            if (dragStartY < dragMouseY) dragDirectionY = 'bottom';
            // console.log(dragDirectionX + ' ' + dragDirectionY);
        }
    });
});
// Reset some variables again on mouseup
$(document).on("mouseup", function() {
    $(document).off("mousemove");
    myDragging = false;
    dragDirectionX = false;
    dragDirectionY = false;
});