jQuery यूआई ड्रैगगेबल, एक ग्रिड 0 स्नैपिंग

Question

मेरे पास दो कंटेनर हैं। एक थंबनेल कंटेनर, और एक "पृष्ठ" कंटेनर। दोनों divs हैं। थंबनेल को दो कंटेनरों के बीच आगे और पीछे खींचा जा सकता है। मैंने थंबनेल पर 'अमान्य' पर वापस आ गया है, इसलिए यदि वे उनमें से किसी एक के बाहर छोड़ दिए गए हैं तो वे दो कंटेनरों में से एक पर वापस आते हैं।

थंबनेल को "पृष्ठ" कंटेनर के अंदर 20x20 ग्रिड में स्नैप करना होगा। यह इतना क्लाइंट है कि क्लाइंट किसी भी स्थान पर "पेज" कंटेनर में थंबनेल डाल सकता है, लेकिन फिर भी उन्हें अच्छी तरह से लाइन करने में सक्षम हो सकता है।

समस्या यह है कि ड्रैगगेबल 'ग्रिड' विकल्प इस के लिए बहुत अच्छा काम नहीं कर रहा है। ऐसा लगता है कि "ग्रिड" ड्रैगगेबल्स स्थान द्वारा निर्धारित किया जाता है जब आप इसे खींचना शुरू करते हैं, ऐसा करने के बजाय कि पृष्ठ में एक असली ग्रिड है जिसे स्नैप किया जा सकता है।

क्या इसे ठीक करने का कोई तरीका है ताकि ग्रिड ड्रैगगेबल की स्थिति के बजाय "पेज" कंटेनर से अलग हो, जब आप इसे खींचना शुरू कर दें?

Answer 1

चेक jQuery के यूआई साइट पर तड़क उदाहरण:

http://jqueryui.com/demos/draggable/#snap-to

आप अपने एक ही उदाहरण लेते हैं और दोनों एक ग्रिड और एक तस्वीर पैरामीटर निर्दिष्ट कर सकते हैं।

तब स्नैप स्नैप चयनकर्ता के ऊपरी बाएं कोने से आधारित होगा।

$("#draggable5").draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] }); 

Jquery साइट पर उदाहरण अब बड़े कंटेनर के आधार पर "80x80" बॉक्स स्नैप करने देगा।

अपनी स्थिति में यह 100% चौड़ाई और ऊंचाई के साथ एक div बनाने का सबसे आसान हो सकता है, तो तस्वीर सेट: चयनकर्ता (सीएसएस चयनकर्ताओं का उपयोग करके) कि div करने के लिए है, तो एक ग्रिड निर्दिष्ट करने के लिए स्नैप करने के लिए ...

गुड लक

Answer 2

शायद आप ड्रैगगेबल पर प्रारंभ ईवेंट का उपयोग करके शुरुआती 20 पिक्सल तक शुरुआती स्थिति को गोल करने का प्रयास कर सकते हैं।

कुछ की तरह (अपरीक्षित ...):

$('#draggable').draggable(
    {snap : grid: [20,20]}, 
    {start : function(event, ui) { 
     var startPosition = $(ui.draggable).position(); 
     $(ui.draggable).css({ 
      'left' : (Math.round(startPosition.left/20)*20)+'px', 
      'top' : (Math.round(startPosition.top/20)*20)+'px'}); 
     } 
    } 
); 

मुझे लगता है कि प्राप्त करने के लिए अपने आप कोशिश कर रहा हूँ, लेकिन मैं एक और कंटेनर के लिए घसीटा तत्व क्लोनिंग कर रहा हूँ ताकि और भी अधिक मुश्किल मैं अभी भी है ;-) प्रारंभिक घटना में सहायक की स्थिति को सेट करने के तरीके को समझना होगा ...

बेशक यह केवल तभी काम करेगा जब प्रारंभिक स्थिति पहले से ही पूर्ण हो (जैसे खींचें)।

असल में, मैंने स्टॉप इवेंट में इस विधि को लागू करके और ग्रिड संपत्ति को हटाकर लगभग इसे हासिल कर लिया है।

आप किसी भी दृश्य प्रतिक्रिया जब चारों ओर वस्तु कोई ग्रिड से प्रति अब और है, क्योंकि, लेकिन जब यह गिर नहीं मिलता है, यह अपने खुद के ग्रिड को जाता है:

stop: function(event, ui) { 
    var stopPosition = $(ui.draggable).position(); 
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'}); 
} 

यहाँ एक काम कर उदाहरण है: http://jsfiddle.net/qNaHE/3/