আপনি jQuery এ "টেনে আনতে" সনাক্ত করতে পারেন?

Question

আমার কাছে একটি থ্রোবার রয়েছে যা ব্যবহারকারীর কোনও লিঙ্ক ক্লিক করলে appear

সমস্যাটি হ'ল একই লিঙ্কটি ক্লিক করে পুনরায় সাজানোর জন্য টেনে আনা যায়। এই ক্ষেত্রে, আমার হাজির হওয়ার জন্য থ্রোবারের প্রয়োজন হবে না। এটি কেবল উপস্থিত হওয়া দরকার যদি এটি সত্যই কোথাও যেতে অপেক্ষা করে।

আমি কীভাবে jQuery এর মাধ্যমে এমন ইভেন্ট শ্রোতা তৈরি করতে পারি যা কোনও থ্রোবারকে কেবলমাত্র কোনও লিঙ্কে ক্লিক করে, এবং ক্লিক এবং টেনে আনার অনুমতি না দেয়?

Comments

সম্ভবত খুব? আমি jQuery incling jQuery UI এর সাথে ড্র্যাগ এবং ড্রপের জন্য বেশ কয়েকটি পদ্ধতির চেষ্টা করেছি, মোডাউন, মাউসআপ, মাউসমোভ ইভেন্টগুলির সাথে আমার নিজস্ব কোড এবং যেটি সবচেয়ে ভাল কাজ করেছে সেটি হ'ল github.com/haberman/jdragDP ।

— রাফায়েল ভেগা

কোনও ভারী কাঠামো ছাড়াই এখানে আরও একটি সহজ সমাধান। 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-র একটি নির্দিষ্ট প্রান্তিকের জন্য পরীক্ষা করে দেখি আমার জন্য এখন কবজির মতো কাজ করে, ধন্যবাদ!

— হাফবিট

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

সেরা উত্তর, আমাকে অনেক সাহায্য করেছে। কেবল একটি চিন্তাভাবনা: ম্যাথ.এসকিআরটিটি সত্যিই প্রয়োজনীয় নয়, বর্গক্ষেত্রের সাথে আরও ভালভাবে কাজ করা (স্কয়ারটি ধীর গতিযুক্ত, ইউএক্সকে প্রভাবিত করতে পারে)।

— ব্রুনো ফেরেরিরা

sqrtধীরে ধীরে নয় এবং ইউএক্সকে প্রভাবিত করবে না, এমনকি আপনি এটি কয়েকবার করেছেন।

— নাটেস

হ্যাঁ, আপনার পদার্থবিজ্ঞানের ইঞ্জিনের অভ্যন্তরীণ লুপের অপ্রয়োজনীয় স্কোয়ার রুটের বিষয়ে চিন্তা করুন, আপনার

— জিকুরি

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

এই সমাধানটি একটি "আন" এবং "অফ" ফাংশনগুলি একটি আনইস বাইন্ডটিকে একটি মাউসমেভ ইভেন্টটিকে আবদ্ধ করতে ব্যবহার করে (বাঁধাই এবং আনবাইন্ড হ্রাস করা হয়)। দুটি মাউসমেভ ইভেন্টের মধ্যে আপনি মাউস x এবং y পজিশনের পরিবর্তনটিও সনাক্ত করতে পারেন।

Answer 5

এটি ব্যবহার করে দেখুন: কখন এটি 'টেনে আনা' অবস্থায় রয়েছে it ;) মজার লিঙ্ক

$(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

সাইমন এছল্টের উত্তরের উপর ভিত্তি করে 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

নিশ্চিত করুন যে আপনি উপাদানটির ড্রাগ্রেটেবল অ্যাট্রিবিউটটি মিথ্যাতে সেট করেছেন যাতে মাউসআপ ইভেন্টগুলি শোনার সময় আপনার কোনও পার্শ্ব প্রতিক্রিয়া না ঘটে:

<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

..চতুর চালাক, আপনি কীভাবে একটি টানাটিকে সনাক্ত করতে পারেন?

— ট্রিপ

আপনি যখন ড্র্যাগেবল সেট আপ করবেন তখন একটি অনড্র্যাগ ইভেন্ট থাকা উচিত। এটি সেখানে আপ।

— ডায়োডিয়াস - জেমস ম্যাকফার্লেন

Answer 11

আপনি যদি jQueryUI ব্যবহার করছেন - একটি অনড্র্যাগ ইভেন্ট রয়েছে। আপনি যদি না হন তবে আপনার শ্রোতাকে মাউসআপের সাথে সংযুক্ত করুন (), ক্লিক করুন () না।

Comments

মাউসআপ কীভাবে একটি ড্রাগ এবং ক্লিকের মধ্যে পার্থক্য করতে পারে?

— ট্রিপ

হুমম - হ্যাঁ আমি অনুমান করি যে আমি এটি যথেষ্ট পরিমাণে ভেবে দেখিনি। মাউসডাউনটিতে সম্ভবত আপনার একজন শ্রোতা যুক্ত থাকতে পারেন যা মাউসের স্থানাঙ্কগুলি রেকর্ড করে। তারপরে যদি মাউসআপের মাউসটির স্থানাঙ্কগুলি একই (বা সত্যিই কাছাকাছি) হয় তবে এটির মাধ্যমে ক্লিক করুন।

— কোয়াশিপিকল

এটি কাজ করে না: স্ট্যাকওভারফ্লো.com

— চক লে বাট

উত্তরটিও 4 বছরের পুরানো - এটি বিবেচনা করুন।

— Quasipickle

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

আমার এমন একটি ফাংশন দরকার যা সর্বদা মাউসের অবস্থানের উপর নজর রাখে এবং বাম-, ডান-, শীর্ষে, নীচে- টেনে নিয়ে যায় detect এটি ক্লিকেও ট্রিগার করে না তবে সর্বনিম্ন 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;
});