क्या आप jQuery में "ड्रैगिंग" का पता लगा सकते हैं?

Question

मेरे पास एक धड़कता है जो तब होता है जब उपयोगकर्ता किसी लिंक पर क्लिक करता है।

समस्या यह है कि उसी लिंक को फिर से क्लिक किया जा सकता है और खींचा जा सकता है। इस मामले में, मुझे थ्रोबार की आवश्यकता नहीं होगी। यह केवल प्रकट होने की जरूरत है अगर वास्तव में कहीं जाने के लिए इंतजार कर रहा है।

मैं jQuery के साथ एक घटना श्रोता कैसे बना सकता हूं जो केवल एक थ्रोबार को प्रकट करने की अनुमति देगा, अगर एक लिंक के माध्यम से क्लिक करें , और क्लिक और ड्रैग न करें?

Comments

शायद बहुत? मैंने jQuery incluing jQuery UI के साथ ड्रैग और ड्रॉप के लिए कई तरीकों की कोशिश की है, मूसडाउन, माउसअप, मूसमोव इवेंट्स के साथ मेरा अपना कोड और जो सबसे अच्छा काम किया है वह है github.com/haberman/jdragdrop ।

— राफेल वेगा

यहां बिना किसी भारी ढांचे के एक और सरल उपाय दिया गया है। blog.blakesimpson.co.uk/read/…

— केमिकल प्रोग्रामर

Answer 1

मूसडाउन पर, राज्य को सेट करना शुरू करें, अगर मूसमव इवेंट को रिकॉर्ड किया जाता है, तो आखिरकार माउसअप पर, जांचें कि क्या माउस चला गया है। अगर यह चला गया, तो हम घसीट रहे हैं। यदि हम स्थानांतरित नहीं हुए हैं, तो यह एक क्लिक है।

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

यहाँ एक डेमो है: http://jsfiddle.net/W7tvD/1399/

Comments

hey..can आप मुझे इस के साथ मदद stackoverflow.com/questions/19703617/...

— हीरा ठाकुर

आप एक ड्रैग दहलीज जोड़ना चाह सकते हैं ताकि आपके क्लिकों को "ए" तत्व पर ड्रैग के रूप में व्याख्या न किया जा सके। बस एक एक्स और वाई मूसमोव घटना में परिवर्तन की एक निश्चित राशि की तलाश करें।

— ऐश ब्लू

विस्मयकारी रूप से हवा के ठीक बाद मूसमोव ने अपने कोड को डालने का काम किया जैसे ही खींचने की शुरुआत का पता चला। धन्यवाद!

— वलमास

मैंने पाया है कि कुछ मामलों और / या ब्राउज़रों में, mousemoveफिर भी कम से कम एक बार बिना किसी आंदोलन के निकाल दिया जाएगा, इसलिए मैंने इसे आंदोलन पर चर बढ़ाने के लिए बदल दिया और फिर mouseup jsfiddle.net/W7tvD/1649 पर एक निश्चित सीमा के लिए जाँच करें मेरे लिए अब एक आकर्षण की तरह काम करता है, धन्यवाद!

— 12

Answer 2

किसी कारण से, उपरोक्त समाधान मेरे लिए काम नहीं कर रहे थे। मैं निम्नलिखित के साथ गया:

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

आप जो भी चाहते हैं, उससे दूरी की सीमा को कम कर सकते हैं, या इसे शून्य तक ले जा सकते हैं।

Comments

सबसे अच्छा जवाब, मुझे बहुत मदद मिली। बस एक विचार: Math.sqrt वास्तव में आवश्यक नहीं है, वर्ग दूरी के साथ बेहतर काम करना (sqrt धीमा है, UX को प्रभावित कर सकता है)।

— ब्रूनो फेरेरा

sqrtधीमा नहीं है और यह UX को प्रभावित नहीं करेगा, भले ही आपने इसे सैकड़ों बार किया हो।

— नैटस

हाँ, अपने भौतिकी इंजन के आंतरिक लूप में अनावश्यक वर्गमूल के बारे में चिंता करें, न कि आपका jquery क्लिक हैंडलर ...

— PeterT

Answer 3

JQuery यूआई के साथ बस यह करो!

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

  },
  drag: function() {

  },
  stop: function() {

  }
});

Comments

आपको jquery-ui की आवश्यकता है, लेकिन यह सबसे आसान तरीका है।

— ओरतोमला लोकनी

Answer 4

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

यह समाधान "ऑन" और "ऑफ" फ़ंक्शन का उपयोग करता है एक अनबाइंड को मूसमव इवेंट (बाइंड और अनबाइंड को हटा दिया जाता है) को बाइंड करने के लिए। आप माउस मूस और दो पदों के बीच की स्थिति में परिवर्तन का पता लगा सकते हैं।

Answer 5

इसे आज़माएँ: यह दिखाता है कि 'घसीटा' राज्य कब है। ;) फिडल लिंक

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

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

Answer 6

मैंने स्वीकार किए गए उत्तर से केवल तभी चलाया जब क्लिक को नीचे खींचकर खींचा जा रहा हो ।

जब मैं माउस को पकड़ नहीं रहा था तब मेरा कार्य चल रहा था। यदि आप यह कार्यक्षमता चाहते हैं, तो यहां अपडेट किया गया कोड है:

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

    }
);

Answer 7

इसके लिए सबसे सरल तरीका है टच स्टार्ट, टच मूव और टच एंड। यह पीसी और टच डिवाइस दोनों के लिए काम कर रहा है, बस इसे jquery प्रलेखन में जांच लें और आशा करें कि यह आपके लिए सबसे अच्छा समाधान है। सौभाग्य

Answer 8

Simen Echholt के उत्तर पर आधारित jQuery प्लगइन। मैंने इसे सिंगल क्लिक कहा।

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

उपयोग में:

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

^^

Answer 9

सुनिश्चित करें कि आप तत्व के सेट खींचने योग्य करने के लिए विशेषता झूठी ताकि आप दुष्प्रभाव जब घटनाओं mouseup को सुनने की जरूरत नहीं है:

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

फिर, आप 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;
  });
});

Answer 10

आपको टाइमर सेट करना होगा। जब टाइमर बार बाहर हो जाए, तो थ्रॉबर शुरू करें और क्लिक को पंजीकृत करें। जब ड्रैग होता है, तो टाइमर को साफ़ करें ताकि यह कभी पूरा न हो।

Comments

..हर चालाक, तुम एक ड्रैग का पता कैसे लगाते हो?

— ट्रिप

जब आप ड्रैग करने योग्य सेट करते हैं, तो एक ऑनड्रैग घटना होनी चाहिए। इसे वहाँ हुक।

— डायोडस - जेम्स मैकफर्लेन 19

Answer 11

यदि आप jQueryUI का उपयोग कर रहे हैं - एक onDrag घटना है। यदि आप नहीं हैं, तो अपने श्रोता को माउसअप () में संलग्न करें, क्लिक नहीं करें ()।

Comments

माउसअप एक क्लिक और एक क्लिक के बीच अंतर कैसे करेगा?

— ट्रिप

हम्म - हाँ मुझे लगता है कि मैंने इसे पर्याप्त रूप से नहीं सोचा था। शायद आपके पास मूसडाउन से जुड़ा एक श्रोता हो सकता है जो माउस के निर्देशांक को रिकॉर्ड करता है। फिर यदि माउसअप पर माउस के निर्देशांक समान (या वास्तव में करीब) हैं, तो इसे एक क्लिक के माध्यम से समझें।

— क्वासिपिकल

यह काम नहीं करता है: stackoverflow.com/questions/12231147/…

— चक ले बट

जवाब भी 4 साल पुराना है - इस पर विचार करें।

— क्वासिपिकल

Answer 12

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

Answer 13

आपको वेरिएबल सेटअप करना नहीं है, आप इसे केवल सेट कर सकते हैं यदि यह डेटा-विशेषता में घूम रहा है

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

Answer 14

मुझे एक ऐसे फंक्शन की जरूरत थी जो हमेशा माउस पोजीशन पर नज़र रखता हो और लेफ्ट-, राइट-, टॉप-, बॉटम- ड्रैगिंग का पता लगाता हो। यह भी क्लिक पर ट्रिगर नहीं करता है, लेकिन न्यूनतम 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;
});