जावास्क्रिप्ट खींचें और स्पर्श उपकरणों के लिए ड्रॉप [बंद]

Question

मैं एक ड्रैग एंड डीआरओपी प्लगइन की तलाश में हूं जो टच डिवाइस पर काम करता है।

मैं jQuery यूआई प्लगइन के लिए समान कार्यक्षमता चाहता हूं जो "ड्रापेबल" तत्वों की अनुमति देता है।

Jqtouch प्लगइन खींच का समर्थन करता है, लेकिन कोई छोड़ने।

यहां ड्रैग एंड ड्रॉप है जो केवल iPhone / iPad का समर्थन करता है।

क्या कोई मुझे ड्रैग एंड ड्रॉप प्लगइन की दिशा में इंगित कर सकता है जो एंड्रॉइड / आईओएस पर काम करता है?

... या यह संभव हो सकता है कि ड्रापेबिलिटी के लिए jqtouch प्लगइन को अपडेट किया जाए, यह पहले से ही Andriod और IOS पर चलता है।

धन्यवाद!

Comments

यह प्रगति पर है, लेकिन मुझे नहीं पता कि कौन से उपकरण इसका समर्थन करते हैं: यह plugins.jquery.com/project/mobiledraganddrop ... क्या आपने jQuerymobile.com पुस्तकालयों के माध्यम से देखा है? मुझे यह डुप्लिकेट SO प्रश्न भी मिला: stackoverflow.com/questions/3172100/…

— iivel

धन्यवाद। हाँ मोबाइल फोन केवल मोबाइल डिवाइस पर क्लिक और ड्रॉप का समर्थन करता है। मुझे jQuerymobile.com पर कुछ भी नहीं मिला। दूसरे प्रश्न का एक उत्तर पहले से ही सही है जो sencha.com/products/touch को संदर्भित करता है जिसके पास एक सीमित स्रोत लाइसेंस है।

— जो

मैं एक के लिए उत्सुक हूं जो मोबाइल और डेस्कटॉप ब्राउज़र पर काम करता है।

— लाइम

Answer 1

आप एक अतिरिक्त लायब्रेरी के साथ Jquery UI का उपयोग कर सकते हैं और एक अतिरिक्त लाइब्रेरी के साथ ड्रॉप कर सकते हैं, जो माउस इवेंट्स को स्पर्श में बदल देती है, जो आपको चाहिए, जो लाइब्रेरी मैं सुझाता हूं वह है https://github.com/furf/jquery-ui-touch-punch , Jquery 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

धन्यवाद, मेरे एंड्रॉइड डिवाइस पर सामान अब ड्रैग करने योग्य है। हालाँकि, जब मैं उस पर क्लिक करता हूँ तो क्लिक ईवेंट को निकाल नहीं दिया जाता है। किसी भी विचार कैसे तय करने के लिए?

— जॉन लैन्डर ने

नोट: चूंकि इवेंट श्रोता पूरे दस्तावेज़ के लिए पंजीकृत है, इसलिए यह समाधान मेरे Nexus S ... पर स्क्रॉल करना भी अक्षम कर देता है ...

— Ethan Leroy

इसे साझा करने के लिए धन्यवाद। हालाँकि, आपको अपने द्वारा पोस्ट किए गए कोड के मूल लेखक को श्रेय देना चाहिए। ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

— अपरिभाषित

@ जोनलैंडर मैंने इवेंट श्रोताओं को केवल उन वस्तुओं के साथ जोड़कर समस्या को ठीक किया, जिन्हें मैं ड्रैग करने योग्य चाहता था,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

@ ईज़ हार्ट - क्या आप कृपया मुझे बता सकते हैं कि क्लिक इवेंट को सक्षम करने के लिए ऊपर दिए गए कोड में अपना कोड कहां रखें ???

— वैले

@ChakoDesai - जब से मैंने अपनी प्रतिक्रिया लिखी है, उत्तर में कोड का भारी संपादन किया गया है। की जाँच करें stackoverflow.com/posts/6362527/revisions 30 जून 2011 से कोड पर और देखो; मेरा जवाब उस संस्करण के आधार पर बहुत अधिक समझ में आएगा।

— ईज़ी हार्ट

@ ईज़ हार्ट - मैंने दिए गए यूआरएल से अपना कोड अपडेट कर दिया है। लेकिन कभी-कभी क्यों clickकाम करता है और कभी-कभी नहीं ???

— वैल

@ChakoDesai - आपका कोड देखे बिना मैं निश्चित नहीं हो सकता। आप इसके लिए एक नया प्रश्न खोल सकते हैं।

— ईज़ी हार्ट

क्लिक घटनाओं के साथ उपरोक्त कोड काम करने के लिए एक अद्यतन उत्तर यहां पाया जा सकता है: stackoverflow.com/questions/28218888/…

— Blunderfest

Answer 3

उपरोक्त कोड के लिए धन्यवाद! - मैंने कई विकल्पों की कोशिश की और यह टिकट था। मुझे इसमें समस्या थी कि डेडफॉल्ट आईपैड पर स्क्रॉल करने से रोक रहा था - मैं अब ड्रैग करने योग्य वस्तुओं का परीक्षण कर रहा हूं और यह अब तक बहुत अच्छा काम करता है।

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

Comments

क्या आपने विंडोज फोन में इसका परीक्षण किया है? या आईफोन के अलावा कुछ और? पिछले अनुभव से, यह iPhones / iPads में सही काम करता है, लेकिन अन्य उपकरणों में अच्छी तरह से काम नहीं करता है, विशेष रूप से विंडोज फोन में।

— लगभग एक शुरुआत

Answer 4

मेरे पास ग्रैगप्रेस के उत्तर के समान ही समाधान था , लेकिन मेरे ड्रैग करने योग्य वस्तुओं ने एक आईडी के बजाय एक वर्ग का उपयोग किया। यह काम करने लगता है।

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

Comments

तथ्य यह है कि आपने बस एक अलग चयनकर्ता का उपयोग किया है, एक अलग उत्तर होने का वारंट नहीं करता है, बल्कि इसके बजाय आपको @ gregpress के उत्तर पर टिप्पणी करनी चाहिए थी।

— bPratik

@bPratik जब तक वह नहीं चाहता था कि उत्तरदाता प्रारूपण का उत्तर प्रदान करता है - और यह तथ्य कि उसने एक संपूर्ण कोड उदाहरण प्रदान किया है, एक अलग उत्तर का वारंट करता है। हालांकि उनके जवाब से जुड़ा एक टिप्पणी छोड़ देना चाहिए था ...

— drzaus

Answer 5

पुराना धागा मैं जानता हूं ......।

@Ryuutatsuo के उत्तर के साथ समस्या यह है कि यह किसी भी इनपुट या अन्य तत्व को ब्लॉक करता है जिसे 'क्लिक' पर प्रतिक्रिया करनी होती है (उदाहरण इनपुट के लिए), इसलिए मैंने यह समाधान लिखा है। इस समाधान ने किसी भी मौजूदा ड्रैग एंड ड्रॉप लाइब्रेरी का उपयोग करना संभव बनाया जो किसी भी टच डिवाइस (या cumputer) पर मूसडाउन, मूसमव और माउसअप घटनाओं पर आधारित है। यह एक क्रॉस-ब्राउज़र समाधान भी है।

मैंने कई उपकरणों पर परीक्षण किया है और यह तेजी से काम करता है (थ्रीडूबमीडिया के ड्रैग एंड ड्रॉप फीचर के साथ संयोजन में ( http://threedubmedia.com/code/event/drag ) भी देखें )। यह एक jQuery समाधान है, इसलिए आप इसे केवल jQuery के काम में उपयोग कर सकते हैं। मैंने इसके लिए jQuery 1.5.1 का उपयोग किया है क्योंकि कुछ नए फ़ंक्शन IE9 और इसके बाद के संस्करण के साथ ठीक से काम नहीं करते हैं (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);???

— वैले

उदाहरण के लिए: simulateTouchEvents ($ ('# yourid;), true); या simulateTouchEvents (document.getElementById ('yourid'), true); आदि

— कोडबीट

क्या आप कृपया मेरे दूसरे प्रश्न लिंक को देख सकते हैं ???

— वले

Threedubmedia.com/code/event/drag का उपयोग करें और x या y तत्व को स्थानांतरित करने को अक्षम करें । जब आप इस लेख में कोड का उपयोग करते हैं तो आप स्क्रॉलबार को 'स्क्रॉल' कर सकते हैं। लेकिन पता है कि आप ऐसा क्यों करना चाहते हैं क्योंकि मोबाइल फोन पर एक पृष्ठ पहले से ही स्क्रॉलबार है। समझ में नहीं आता कि आप इसके साथ क्या करना चाहते हैं। सफलता!

— कोडबीट

मुझे कॉलम के ड्रैग-एन-ड्रॉप को जोड़ना है और दोनों को स्क्रॉल करना है। जब मैं touchघटनाओं को चालू करता chromeहूं, तो मैं तालिका को स्क्रॉल नहीं कर पाता हूं। मोबाइल पर भी नहीं।

— वेले