jQuery यूआई सॉर्ट करने योग्य आइटम नीचे धक्का

Question

मुझे इस समस्या को हल करने में कुछ समस्याएं आ रही हैं। मैंने कुछ अन्य संबंधित प्रश्नों को देखा है लेकिन उन समाधानों में से कोई भी मेरे लिए काम नहीं करता है।

this.$el.sortable({ 
    placeholder: 'ui-state-highlight', 
    connectWith: '.connectedList', 
    dropOnEmpty: true 
}); 

सीएसएस-चाल है कि अन्य समाधान में पोस्ट किया गया था के कुछ कोशिश कर के बावजूद, आइटम अभी भी नीचे धकेल दिया जाता है के रूप में इस छवि से देखी गई:

example http://img541.imageshack.us/img541/9163/examplepm.png

आप का एक उदाहरण देख सकते हैं यहां कोड: http://jsfiddle.net/jxFBj/1/

Answer 1

मैं कहूंगा कि समस्या का स्रोत इनलाइन तत्वों का लंबवत संरेखण है, जो डिफ़ॉल्ट रूप से बेसलाइन है। हालांकि यह इनलाइन और (इनलाइन-) ब्लॉक तत्वों और मार्जिन के उपयोग का मिश्रण है जो अंततः समस्या को ट्रिगर करता है। मुझे लगता है कि यह बहस योग्य है कि समस्या की वास्तविक उत्पत्ति क्या है।

वैसे भी, मैं यह सुनिश्चित नहीं कर सकता कि क्या हो रहा है, लेकिन मेरे लिए यह प्लेसहोल्डर (जिसमें कोई इनलाइन सामग्री नहीं है) बेसलाइन की स्थिति बदलती है (निश्चित रूप से बिल्कुल क्यों नहीं), और इसलिए स्थिति छवियों, जो डिफ़ॉल्ट रूप से इनलाइन तत्व हैं, भी बदलती हैं। बनाना छवियों तत्व को

:

.sortableList-item img { 
    display: block; 
} 

अद्यतन (13.01.2015):

इसे ठीक करने के कुछ तरीके हैं display चाल हाल ब्राउज़रों के साथ लगता है vertical-align जैसा कि नीचे उल्लिखित एक ही समस्या है, यानी तत्व क्षैतिज रूप से स्थानांतरित होते हैं।

http://jsfiddle.net/jxFBj/2/

बजाय इनलाइन ब्लॉक के चल तत्वों का उपयोग करना: लंबवत संरेखण बदलने

.ui-state-highlight { 
    float: left; 
    height: 100px; 
    width: 100px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

.sortableList-item { 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 
} 

http://jsfiddle.net/jxFBj/3/

top लिए भी काम करता है, लेकिन जब सूची क्षैतिज स्थानांतरण का कारण होगा तत्व कई लाइनों पर फैले हैं, इसलिए शायद यह नहीं है n विकल्प:

.ui-state-highlight { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    vertical-align: top; 
} 

.sortableList-item { 
    display: inline-block; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
} 

http://jsfiddle.net/jxFBj/4/