स्क्रॉल के साथ एक div के अंदर गतिशील सूची पर ड्रैग और ड्रॉप कैसे करें?

Question

आपके समय के लिए धन्यवाद।

मैं फोनगैप के साथ एक मोबाइल ऐप विकसित कर रहा हूं। मेरे पास एक दृश्य है जिसमें कुछ रिकॉर्ड हैं, और उन रिकॉर्ड्स को ड्रैग और ड्रॉप करके पुनर्व्यवस्थित करने की आवश्यकता है। इस रिकॉर्ड की संख्या 2 से 12 तक variate सकता है, और वे एक कंटेनर है कि सीएसएस के मूल गुण, इस तरह से एक स्क्रॉल को लागू करता है अंदर हैं:

div#parentDiv { 
    -webkit-overflow-scrolling: touch; 
    overflow:     scroll; 
    width:      100%; 
} 

अब, बात है। मैंने ऐसा करने की कोशिश की है लेकिन कुछ तरह की घटनाओं का संघर्ष लगता है। जब आप टैप डाउन करते हैं या "उंगली डाउन" ईवेंट करते हैं, तो उस घटना के आंतरिक तत्वों को खींचने और छोड़ने में सक्षम होने के बजाय, जो ईवेंट रहता है वह आंतरिक कंटेनर की स्क्रॉल है।

मुझे लगता है कि स्वीकार्य नहीं है किसी अन्य विकल्प के tryied, जैसा कि आप इस स्क्रीनशॉट में देखेंगे:

यहाँ मैं इस सूची के अंतिम तत्व करने के लिए नीचे एक स्क्रॉल कर दिया।

आप देखेंगे के रूप में, मैं दोनों स्क्रॉल रखने के लिए और एक खींचें और ड्रॉप की जरूरत है।

क्या आपको कोई विचार है कि मैं इसे कैसे हल कर सकता हूं?

मैंने प्लगइन, एचटीएमएल देशी ड्रैग और ड्रॉप का उपयोग करके कोशिश की है, और अब तक, मेरे लिए कुछ भी काम नहीं किया है।

फिर से धन्यवाद।

Answer 1

मुझे यकीन नहीं है कि मैं पूरी तरह से समस्या को समझता हूं। लेकिन, यहां एक समाधान पर मेरी ले रहा है:

window.addEventListener("mousedown", function(e1){ 
    timer = setTimeout(startDrag_disableScroll, 500); 
    window.addEventListener("mousemove", function(e2){ 
     //if not dragging, and |e1_location-e2_location| 
     //exceeds a certain threshold, cancel the timer 
     //otherwise, drag the object, if dragging 
    }); 
}); 
window.addEventListener("mouseup", function(e){ 
    //disable dragging 
}); 

function startDrag_disableScroll(e){ 
    //disable scrolling 
    //enable dragging 
} 

1. प्रतीक्षा जब तक एक आइटम पर उपयोगकर्ता क्लिक
2. अगर वे समय (< .5s) की एक छोटी राशि के लिए एक ही स्थिति पकड़, हम से स्विच "स्क्रॉलिंग" मोड को "ड्रैगिंग" मोड में; यदि वे बहुत अधिक स्थानांतरित करते हैं, तो हम मान सकते हैं कि वे इसके बजाय स्क्रॉल करना चाहते हैं, इसलिए हम ड्रैगिंग सक्षम नहीं करते हैं।
3. एक बार "खींच" मोड में, हम छिपा
4. प्रतीक्षा करने के लिए सीएसएस अतिप्रवाह बदल रहा है जब तक उपयोगकर्ता "स्क्रॉल" मोड पर वापस जाने से पहले अपने उंगली/माउस विज्ञप्ति द्वारा स्क्रॉल को अक्षम करें।

Here is a JSFiddle with a complete demo। यदि आप जल्दी से अपने माउस पर क्लिक करके खींचें, तो कुछ भी नहीं होगा (यदि आप मोबाइल डिवाइस पर थे, तो इसे स्क्रॉल करना चाहिए)। हालांकि, अगर आप .5 सेकेंड के लिए क्लिक करते हैं और दबाते हैं, तो स्क्रॉलिंग अक्षम हो जाएगी और ड्रैगगेबल आइटम लाल हो जाएगा। एक बार माउस छोड़ने के बाद, इसे रीसेट करना चाहिए।

मुझे लगता है कि आप भी स्क्रॉल करने में सक्षम होना चाहते हैं जबकि खींचें। ऐसा करने के लिए, आपको जावास्क्रिप्ट के साथ ऑटो-स्क्रॉल करना होगा। यदि वे स्क्रीन को पर्याप्त रूप से ऊपर/नीचे आइटम खींचते हैं, तो यह क्रमशः ऊपर या नीचे ऑटो-स्क्रॉल करना शुरू कर देगा।

Answer 2

Use this.

खींचें और मदों की एक दो आयामी आकार बदलने योग्य और जिम्मेदार सूची के लिए छोड़ पुस्तकालय।

लगभग निश्चित रूप से समस्या आप कर रहे हैं के पते, और सुविधाओं के लिए & विस्तार है कि निश्चित रूप से उपयोगी के रूप में आप विकास :)

Answer 3

मैं का प्रयोग करेंगे जारी रखने के लिए किया जाएगा की अनुमति देगा एक TapHold (भी "लंबे प्रेस" के रूप में जाना) "क्रमबद्ध सूचियों" को ट्रिगर करने के लिए घटना। उपयोगकर्ता लेखों की सूची को सॉर्ट करने में सक्षम नहीं होगा जब तक कि वह सूची में कुछ सेकंड तक दबाए। उस पल में, वह सूची वस्तुओं को ऑर्डर करने में सक्षम होगा।

आप किसी भी jQuery UI सॉर्ट करने योग्य या किसी अन्य "sortable" प्लगइन का उपयोग कर सकते हैं।

var pressTimer; 
$(function(){ 
     // By default, disable the sortable list 

     $("#sortable").mouseup(function(){ 
      // Disable the sortable list 

      clearTimeout(pressTimer); 
      // Clear timeout 
      return false; 
     }).mousedown(function(){ 
      // Set timeout 
      pressTimer = window.setTimeout(function() { 
       // Enable the sortable list 

      },1000); 
      return false; 
     }); 
    }); 

:

आप TapHold का उपयोग नहीं करना चाहते हैं, तो आपको निम्न कोड का उपयोग कर सकते