Bisakah Anda mendeteksi "menyeret" di jQuery?

Saya memiliki denyut yang muncul saat pengguna mengklik link.

Masalahnya adalah bahwa tautan yang sama dapat diklik dan diseret untuk diatur ulang. Dalam hal ini, saya tidak perlu detak jantung muncul. Itu hanya perlu muncul jika benar-benar menunggu untuk pergi ke suatu tempat.

Bagaimana saya bisa, dengan jQuery, membuat event listener yang hanya akan memungkinkan berdenyut untuk muncul jika itu adalah klik ke tautan , dan bukan klik dan seret?

Di mousedown, mulai setel status, jika peristiwa mousemove dipecat, rekam, akhirnya di mouseup, periksa apakah mouse bergerak. Jika pindah, kita sudah menyeret. Kalau kita belum pindah, itu klik.

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

Berikut demo: http://jsfiddle.net/W7tvD/1399/

Untuk beberapa alasan, solusi di atas tidak berfungsi untuk saya. Saya pergi dengan yang berikut:

$('#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');
    }
})

Anda dapat menyesuaikan batas jarak menjadi apa pun yang Anda inginkan, atau bahkan membawanya ke nol.

Dengan jQuery UI lakukan ini!

$( "#draggable" ).draggable({
  start: function() {

  },
  drag: function() {

  },
  stop: function() {

  }
});

$(".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");
});

Solusi ini menggunakan fungsi "on" dan "off" untuk mengikat peristiwa mousemove yang dilepaskan (bind dan unbind tidak berlaku lagi). Anda juga dapat mendeteksi perubahan posisi x dan y mouse antara dua peristiwa gerakan mouse.

Coba ini: ini menunjukkan kapan status 'diseret'. ;) link biola

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

    $("ul").sortable();
});

Saya bercabang dari jawaban yang diterima untuk hanya berjalan ketika klik sedang DIBANTU dan diseret .

Fungsi saya berjalan saat saya tidak menahan mouse. Berikut kode yang diperbarui jika Anda juga menginginkan fungsi ini:

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);
        }

    }
);

Untuk cara termudah ini adalah sentuhan mulai, gerakan sentuh, dan ujung sentuh. Itu berfungsi untuk PC dan perangkat sentuh, cukup periksa di dokumentasi jquery dan harap ini adalah solusi terbaik untuk Anda. semoga berhasil

Plugin jQuery berdasarkan jawaban Simen Echholt. Saya menyebutnya satu 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);
        });
    });
};

Digunakan:

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

^^

Pastikan Anda menyetel atribut elemen yang dapat diseret ke false sehingga Anda tidak memiliki efek samping saat mendengarkan peristiwa mouseup:

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

Kemudian, Anda dapat menggunakan jQuery:

$(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;
  });
});

Anda perlu menyetel pengatur waktu. Saat penghitung waktu habis, nyalakan denyut dan daftarkan kliknya. Saat seret terjadi, hapus pengatur waktu agar tidak pernah selesai.

Jika Anda menggunakan jQueryUI - ada acara onDrag. Jika tidak, maka lampirkan listener Anda ke mouseup (), bukan click ().

// 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");
});

Anda tidak perlu menyiapkan variabel, Anda dapat menyetelnya jika variabel tersebut bergerak di atribut data

$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
        }
    });

Saya membutuhkan fungsi yang selalu melacak posisi mouse dan mendeteksi penarikan ke kiri, kanan, atas, bawah. Itu juga tidak memicu saat klik tetapi membutuhkan minimal pergerakan 15px

/**
 * 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;
});