कस्टम स्केल कोड के साथ jquery ui draggable sortable सामान को कैसे गठबंधन करें?

Question

मैं अपने ड्रैग करने योग्य सॉर्ट करने योग्य सामान को कुछ स्केल कोड के साथ गठबंधन करने की कोशिश कर रहा हूं जो मेरे लिए अच्छा काम करता है। मैं अभी तक एक अच्छा समाधान खोजने में विफल रहा। http://jsfiddle.net/UXLAE/7/

मैं पैमाने कोड बाहर टिप्पणी की है, ताकि आप देख सकते हैं कि एप्लिकेशन वास्तव में काम करता है चाहिए:

कि पर एक नज़र डालें।

आपके पास शीर्ष पैनल है और वहां से नीचे पैनल तक आइटम खींच सकते हैं (आइटम क्लोन किए गए हैं)। नीचे पैनल में आपको आइटम को सॉर्ट करने में सक्षम होना चाहिए।

अब मैं शीर्ष और निचले पैनल दोनों में माउसओवर पर प्रत्येक आइटम को स्केल करने में सक्षम होना चाहता हूं। पैमाने एक ओवरले होना चाहिए और स्रोत आइटम के समान केंद्र होना चाहिए। मैं इसे .animate() या .effect ("scale") के साथ करने में असफल रहा, जो चीजों को बहुत आसान बना देता, लेकिन मैं कुछ कस्टम कोड लिखने में कामयाब रहा जो बहुत अच्छी तरह से काम करता है (जिस हिस्से में मैंने टिप्पणी की थी)। मेरी समस्या यह है कि अब मुझे नहीं पता कि कस्टम कोड को मेरे पास पहले से कैसे जोड़ना है। वे थोड़े दूसरे को तोड़ते हैं;) लेकिन खुद की तलाश करें।

अच्छा होगा अगर आप कुछ विचार या समाधान भी पोस्ट कर सकते हैं।

बधाई

Answer 1

आप अपने मूल तत्व काफी अच्छी तरह से काम कर रहा है, लेकिन मुझे लगता है कि अपने पर टिप्पणी की कोड कार्यक्षमता टूट जाता है।

अपने droppable कोड पर एक नज़र डालें:

accept: "#topSquareList li", 

आपका स्केलिंग समारोह एक क्लोन जो #topSquareList का हिस्सा नहीं है बना दिया है। मुझे संदेह है कि यही कारण है।

जब आप क्लोन() का उपयोग करते हैं, तो यह क्लोन #topSquareList (केवल मूल है) का बच्चा नहीं है, यही कारण है कि आपका चयनकर्ता आपके ड्रॉपपैबल कोड में मेल नहीं खाता है। आपको जो भी छोड़ना है और उचित चयनकर्ता बनाना है उसे हल करने की आवश्यकता है।

अद्यतन:

कुछ लगभग नगण्य के बाद, मैं इस के साथ आया था: http://jsfiddle.net/UXLAE/27/

आपका पैमाने कोड अब/खींच/छोड़ने के साथ संयोजन के रूप में काम कर रहा है छँटाई। आपको अपने मूल कोड में जो कुछ भी बनाया गया था उसकी तुलना करना चाहिए, यह पता लगाने के लिए कि यह क्यों काम नहीं कर रहा था - कुछ कारणों से अधिक क्यों थे। क्या इसने सहायता की?

Answer 2

यदि आप सीएसएस ट्रांसफॉर्मेशन का उपयोग कर सकते हैं, तो बस निम्न नियम जोड़ना किसी भी जावास्क्रिप्ट के बिना स्केलिंग को पूरा करेगा और इसलिए jQueryUI ड्रैगिंग, ड्रॉप या सॉर्टिंग पर शून्य प्रभाव होगा। transform के लिए

.square:hover { 
    -webkit-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    transform:scale(1.2); 
} 

मूल निवासी ब्राउज़र समर्थन complete नहीं है, लेकिन प्रमुख आधुनिक ब्राउज़रों पूरी तरह से समर्थित हैं। यदि आपको उन ब्राउज़रों का समर्थन करने की आवश्यकता है तो IE < v9 के लिए workaround है।