জাভাস্ক্রিপ্ট টাচ ডিভাইসের জন্য টানুন এবং ছাড়ুন [বন্ধ]

Question

আমি একটি টেনে আনতে এবং ড্রপ প্লাগইন খুঁজছি যা টাচ ডিভাইসে কাজ করে।

আমি jQuery UI প্লাগইন এর অনুরূপ কার্যকারিতা চাই যা "ড্রপযোগ্য" উপাদানগুলিকে অনুমতি দেয়।

Jqtouch প্লাগইন টেনে সমর্থন, কিন্তু কোন ড্রপ।

এখানে ড্রাগ এবং ড্রপ যা কেবল আইফোন / আইপ্যাড সমর্থন করে।

অ্যান্ড্রয়েড / আইওএস এ কাজ করে এমন কোনও ড্রাগ এবং ড্রপ প্লাগইনটির দিক থেকে আমাকে কী কেউ নির্দেশ করতে পারে?

... অথবা ড্রপযোগ্যতার জন্য jqtouch প্লাগইন আপডেট করা সম্ভব, এটি ইতিমধ্যে Andriod এবং IOS এ চলে runs

ধন্যবাদ!

Comments

এটি প্রগতিতে রয়েছে, তবে কী ডিভাইসগুলি এটি সমর্থন করে তা আমি জানি না: এই প্লাগইনস.জকোয়ারি / প্রজেক্ট / মোবাইলড্রাগ্যান্ডড্রপ ... আপনি কি jQuerymobile.com লাইব্রেরিটি দেখেছেন? : আমি এই ডুপ্লিকেট তাই প্রশ্ন পাওয়া stackoverflow.com/questions/3172100/...

— iivel

ধন্যবাদ। হ্যা মোবাইলড্রেডগ্র্যান্ডড্রপ কেবল মোবাইল ডিভাইসগুলিতে ক্লিক এবং ড্রপ সমর্থন করে। আমি jQuerymobile.com এ কিছুই খুঁজে পেলাম না। অন্য প্রশ্নের ইতিমধ্যে একটি চিহ্ন রয়েছে যা ইতিমধ্যে সঠিক হিসাবে চিহ্নিত হয়েছে যা এটি একটি সীমাবদ্ধ উত্স লাইসেন্স সহ sencha.com / প্রোডাক্টস / টাচকে বোঝায় ।

— জো

মোবাইল এবং ডেস্কটপ ব্রাউজারগুলিতে কাজ করে এমন একজনের জন্য আমি আগ্রহী।

— চুন

Answer 1

আপনি অতিরিক্ত লাইব্রেরির সাহায্যে টানুন এবং ড্রপ করার জন্য জ্যাকিউরি ইউআই ব্যবহার করতে পারেন যা মাউসের ইভেন্টগুলিকে অনুবাদ করে যা আপনার প্রয়োজন অনুসারে অনুবাদ করে, আমার যে লাইব্রেরিটি সুপারিশ করা হয়েছে তা হল https://github.com/furf/jquery-ui-touch-punch , এটি আপনার জাগ্রত UI থেকে টেনে আনুন এবং ছোঁয়াতে স্পর্শ করার জন্য কাজ করা উচিত

অথবা আপনি এই কোডটি ব্যবহার করতে পারেন যা আমি ব্যবহার করছি, এটি মাউস ইভেন্টগুলিকেও সংস্পর্শে রূপান্তরিত করে এবং এটি ম্যাজিকের মতো কাজ করে।

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

এবং আপনার ডকুমেন্টে.ইডিআর কেবল ডিএন () ফাংশনটি কল করুন

কোড থেকে পাওয়া এখানে

Comments

ধন্যবাদ, আমার অ্যান্ড্রয়েড ডিভাইসে স্টাফ এখন টেনে নিতে সক্ষম। যাইহোক, ক্লিক ইভেন্টটি আমি এতে ক্লিক করলে আর বরখাস্ত করা হয় না। কোনও ধারণা কীভাবে এটি ঠিক করবেন?

— জন ল্যান্ডহির

দ্রষ্টব্য: ইভেন্ট শ্রোতা পুরো দস্তাবেজের জন্য নিবন্ধভুক্ত থাকায়, এই সমাধানটি আমার নেক্সাস এস-তে স্ক্রোলিং অক্ষম করে ...

— ইথান লেরয়

এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ। তবে আপনার পোস্ট করা কোডটির মূল লেখককে আপনার ক্রেডিট দেওয়া উচিত। ross.posterous.com/2008/08/19/iphone-touch-events-in- জাভাস্ক্রিপ্ট

— সংজ্ঞায়িত হয়েছে

@ জনলন্ধির আমি ইভেন্ট শ্রোতাদের কেবলমাত্র যে জিনিসগুলিতে টেনে নিতে সক্ষম হতে চেয়েছিলাম document.getElementById('draggableContainer').addEventListener(...

— সেগুলিতে

টাচ-পাঞ্চ দুর্দান্ত। এইগুলির মধ্যে একটি 'এটি কেবল কাজ করে' জিনিস। হায়, এটি দ্বৈত স্পর্শকে সমর্থন করে না ... যা দেখতে আমি পছন্দ করব।

— ডিএ

Answer 2

যে কেউ এটি ব্যবহার করতে এবং 'ক্লিক' কার্যকারিতাটি রাখার জন্য সন্ধান করছেন (যেমন জন ল্যান্ডহির তাঁর মন্তব্যে উল্লেখ করেছেন), আপনি এটি কেবল কয়েকটি সংশোধন করে করতে পারেন:

কয়েকটা গ্লোবাল যুক্ত করুন:

var clickms = 100;
var lastTouchDown = -1;

তারপরে মূল থেকে এটিতে স্যুইচ বিবৃতিটি পরিবর্তন করুন:

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

আপনি আপনার পছন্দ অনুসারে 'ক্লিকমস' সামঞ্জস্য করতে চাইতে পারেন। মূলত এটি কেবল একটি 'টাচস্টার্ট' সন্ধান করছে যার পরে ক্লিকের অনুকরণ করার জন্য একটি 'স্পর্শ' দ্রুত হয়।

Comments

@ ইজেড হার্ট - আপনি কি দয়া করে আমাকে ক্লিকের ইভেন্টটি সক্ষম করতে উপরের কোডটিতে আপনার কোডটি কোথায় রাখবেন তা আমাকে জানান ???

— ভালে

@ চকোডেসাই - আমি আমার প্রতিক্রিয়া লেখার পর থেকে উত্তরের কোডটি ভারী সম্পাদিত হয়েছে। পরীক্ষা করে দেখুন stackoverflow.com/posts/6362527/revisions 30 জুন, 2011 থেকে কোড এবং বর্ণন; আমার উত্তরটি সেই সংস্করণটির উপর ভিত্তি করে আরও অনেক কিছু বুঝবে।

— ইজেড হার্ট

@ ইজেড হার্ট - আমি প্রদত্ত ইউআরএল থেকে আমার কোড আপডেট করেছি। তবে কেন কখনও কখনও clickকাজ করে এবং কখনও কখনও হয় না কেন ???

— ভালে

@ চকোডেসাই - আপনার কোড না দেখে আমি নিশ্চিত হতে পারি না। আপনি এটির জন্য একটি নতুন প্রশ্ন খুলতে চাইতে পারেন।

— ইজেড হার্ট

ক্লিক ঘটনা সঙ্গে উপরের কোড কাজ করতে একটি আপডেট উত্তর এখানে পাওয়া যাবে: stackoverflow.com/questions/28218888/...

— Blunderfest

Answer 3

উপরের কোডগুলির জন্য ধন্যবাদ! - আমি বেশ কয়েকটি বিকল্প চেষ্টা করেছিলাম এবং এটিই ছিল টিকিট। আমার ডিফল্ট আইপ্যাডে স্ক্রোলিং রোধ করছিল তাতে আমার সমস্যা ছিল - আমি এখন টেনে নেবার যোগ্য আইটেমগুলির জন্য পরীক্ষা করছি এবং এটি এখন পর্যন্ত দুর্দান্ত কাজ করে।

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

Comments

আপনি কি উইন্ডোজ ফোনে এটি পরীক্ষা করেছেন? আইফোন ছাড়া আর কিছু? অতীত অভিজ্ঞতা থেকে, মনে হচ্ছে এটি আইফোন / আইপ্যাডগুলিতে নিখুঁতভাবে কাজ করে তবে অন্যান্য ডিভাইসগুলিতে, বিশেষত উইন্ডোজ ফোনগুলিতে এটি ভালভাবে কাজ করে না।

— প্রায়

Answer 4

আমার কাছে গ্রেগপ্রেস উত্তরের মতো একই সমাধান ছিল , তবে আমার টেনে নিতে সক্ষম আইটেমগুলিতে একটি আইডির পরিবর্তে একটি ক্লাস ব্যবহার করা হয়েছিল। মনে হচ্ছে এটি কাজ করে।

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

Comments

আপনি কেবল আলাদা নির্বাচক ব্যবহার করেছেন এমন বিষয়টি পৃথক উত্তর হওয়ার নিশ্চয়তা দেয় না, পরিবর্তে আপনার @ গ্রেগপ্রেসের উত্তর সম্পর্কে মন্তব্য করা উচিত ছিল।

— বিপ্রতিক

@ বিপ্রতিখ যদি না চান যে তিনি উত্তরের ফর্ম্যাটিংয়ের কোনও উত্তর সরবরাহ করেন - এবং তিনি একটি সম্পূর্ণ কোড উদাহরণ সরবরাহ করেছেন তা একটি পৃথক উত্তর দেয় warrant যদিও তার উত্তরের সাথে লিঙ্ক করে একটি মন্তব্য করা উচিত ছিল ...

— ড্রাজাস

Answer 5

পুরানো থ্রেড আমি জানি .......

@Ryuutatsuo এর উত্তরে সমস্যা হ'ল এটি 'ইনপুটস' (উদাহরণস্বরূপ ইনপুট) -এ প্রতিক্রিয়া দেখাতে পারে এমন কোনও ইনপুট বা অন্যান্য উপাদানকেও ব্লক করে, তাই আমি এই সমাধানটি লিখেছি। এই সমাধানটি কোনও স্পর্শ ডিভাইসে (বা বৈদ্যুতিন) মউসডাউন, মাউসমাভ এবং মাউসআপ ইভেন্টের উপর ভিত্তি করে বিদ্যমান যে কোনও ড্রাগ এবং ড্রপ লাইব্রেরি ব্যবহার করা সম্ভব করেছে। এটি একটি ক্রস-ব্রাউজার সমাধানও।

আমি বেশ কয়েকটি ডিভাইসে পরীক্ষা করেছি এবং এটি দ্রুত কাজ করে (থ্রিডবমিডিয়া-এর ড্রাগ এবং ড্রপ বৈশিষ্ট্যের সংমিশ্রণে (এছাড়াও http://thribubmedia.com/code/event/drag দেখুন ))। এটি একটি jQuery সমাধান যাতে আপনি এটি কেবল jQuery libs দিয়ে ব্যবহার করতে পারেন। আমি এর জন্য jQuery 1.5.1 ব্যবহার করেছি কারণ কিছু নতুন ফাংশন আইই 9 এবং এর উপরে (jQuery এর নতুন সংস্করণগুলির সাথে পরীক্ষিত নয়) সঠিকভাবে কাজ করে না ।

কোনও ইভেন্টে কোনও ড্রাগ বা ড্রপ অপারেশন যুক্ত করার আগে আপনাকে প্রথমে এই ফাংশনটি কল করতে হবে :

simulateTouchEvents(<object>);

আপনি ইনপুট জন্য বা নিম্নলিখিত সংশ্লেষ ব্যবহার করে ইভেন্ট হ্যান্ডলিং গতি বাড়ানোর জন্য সমস্ত উপাদান / শিশুদের অবরুদ্ধ করতে পারেন:

simulateTouchEvents(<object>, true); // ignore events on childs

আমি লিখেছি কোড এখানে। আমি জিনিসগুলি মূল্যায়নের গতি বাড়ানোর জন্য কিছু সুন্দর কৌশল ব্যবহার করেছি (কোড দেখুন)।

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

এটি কী করে: প্রথমদিকে, এটি একক স্পর্শ ইভেন্টগুলিকে মাউসের ইভেন্টগুলিতে অনুবাদ করে। এটি তদন্ত করে যে কোনও ইভেন্ট এলিমেন্টে / এ উপাদানটিতে আক্রান্ত হয়েছে কিনা তাকে অবশ্যই প্রায় টেনে আনতে হবে। যদি এটি কোনও ইনপুট উপাদান যেমন ইনপুট, টেক্সারিয়া ইত্যাদি হয় তবে এটি অনুবাদটি এড়িয়ে যায়, বা কোনও মানদণ্ডের মাউস ইভেন্টের সাথে এটি সংযুক্ত থাকলে এটি একটি অনুবাদও এড়িয়ে যাবে।

ফলাফল: টেনে নেওয়ার যোগ্য উপাদানগুলির প্রতিটি উপাদান এখনও কাজ করছে।

শুভ কোডিং, শুভেচ্ছা, এরউইন হান্টজেস

Comments

আমার কোন বস্তুটি পাস করতে হবে simulateTouchEvents(<object>, true);???

— ভালে

উদাহরণস্বরূপ: সিমুলেট টাচএভেন্টস ($ ('# আপনারড;), সত্য); বা সিমুলেট করুন টাচএভেন্টস (ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ('আপনারড'), সত্য); ইত্যাদি

— কোডবিট

আপনি দয়া করে আমার অন্য প্রশ্ন লিঙ্কটি দেখতে পারেন ???

— ভালে

থ্রিডবমিডিয়া / কোড / সেভেনড / ডিগ্র ব্যবহার করুন এবং এক্স বা ওয়াই এলিমেন্টটি অক্ষম করুন । আপনি যখন এই নিবন্ধে কোড ব্যবহার করেন আপনি স্ক্রোলবারগুলি 'স্ক্রোল' করতে পারেন। তবে আপনি কেন এটি করতে চান তা জানেন কারণ মোবাইল ফোনে একটি পৃষ্ঠা ইতিমধ্যে স্ক্রোলবার পেয়েছে। আপনি এটি দিয়ে কী করতে চান তা বুঝতে পারছেন না। সফল!

— কোডবিট

আমি কলামগুলির ড্র্যাগ-এন-ড্রপ এবং উভয় স্ক্রোলিং যুক্ত করেছি। আমি যখন touchইভেন্টগুলি চালু করি তখন আমি chromeটেবিলটি স্ক্রোল করতে সক্ষম হই না। এমনকি মোবাইলেও নয়।

— ভালে