JQuery UI एक तत्व के भीतर ग्रिड पर स्नैपिंग

Question

मेरे पास दो divs हैं, और मैं एक div को दूसरे में ड्रॉप करने के लिए JQueryUI लाइब्रेरी का उपयोग कर रहा हूं।

मैं ड्रैगगेबल div को पूरे पृष्ठ में ग्रिड की बजाय ड्रॉप div के भीतर एक ग्रिड में स्नैप करना चाहता हूं। मुझे ड्रॉप तत्व को स्नैप करने के लिए स्नैप विशेषता मिली है, मुझे ग्रिड विशेषता को ग्रिड में स्नैप करने के लिए भी मिला है, लेकिन क्या दोनों को गठबंधन करने का कोई तरीका है?

$("#draggable").draggable({ grid: [ 50, 50 ] }); 

केवल अन्य वैकल्पिक हल के बारे में मैं छोटे स्नैप divs बहुत से ड्रॉप div पॉप्युलेट करने के लिए जो एक दृष्टिकोण मुझे पसंद नहीं है है कर रहे हैं लगता है कि कर सकते हैं!

Answer 1

ड्रैगगेबल खत्म होने पर पता लगाने के लिए आप ड्रॉपपेल के ओवर और आउट विधियों का उपयोग कर सकते हैं, और उसके बाद केवल उस बिंदु पर ग्रिड पैरामीटर लागू कर सकते हैं।

$("#draggable").draggable(); 
$("#snaptarget").droppable({ 
    over: function(event, ui) { 
     $("#draggable").draggable({ 
      grid: [50, 50] 
     }); 
    }, 
    out: function(event, ui) { 
     $("#draggable").draggable("option", "grid", false); 
    } 
});​ 

jsFiddle example।