jquery ui

Question

का उपयोग करते समय तत्वों की छंटाई को नियंत्रित करने का कोई तरीका है मेरे पास तत्वों (.draggable) के साथ एक क्रमबद्ध div (#sortable) है। वहां, जब मैं नीचे से ऊपर तत्वों को सॉर्ट करता हूं, तो तत्वों को आसानी से खींचकर सॉर्ट किया जा सकता है और मुझे शीर्ष पर बहुत अधिक खींचने की आवश्यकता नहीं है। लेकिन जब तत्वों को ऊपर से नीचे सॉर्ट करते हैं, तो मुझे नीचे से नीचे तत्व को खींचना होता है। क्या तत्वों को क्रमबद्ध करने का कोई तरीका है, ताकि अगर मैं थोड़ा ऊपर/नीचे खींचूं और सभी तरह से ऊपर/नीचे नहीं, तो यह प्लेसहोल्डर को क्रमशः तत्व को रखने के लिए प्रदर्शित करेगा?

codepen पर डेमो। के रूप में मैं तत्व तत्व मैं क्रमबद्ध करना चाहते हैं ऊपर नीचे से ऊपर तक खींचें करने के लिए की जरूरत नहीं है

js

$('#content #sortable').sortable({ 
    handle: '.drag_handle', 
    placeholder: "ui-state-highlight", 
    axis: "y" 
    }); 

    $('#blocks .draggable').draggable({ 
    helper: "clone", 
    revert: "invalid", 
    connectToSortable: '#content #sortable' 
    }); 

अद्यतन

ऊपर की तरफ छंटाई

ऊपर की तरफ छंटाई के लिए आसान है साथ में। के रूप में मैं तत्व तत्व के नीचे सभी तरह से मैं के साथ क्रमबद्ध करना चाहते हैं खींचें करने के लिए है

नीचे की ओर

छंटाई नीचे की ओर छंटाई मुश्किल है।

Answer 1

बस sortable API"pointer" के tolerance विकल्प बदल जाते हैं। जब यह तत्व प्लेसहोल्डर पर ओवरलैप कर रहा है तब तक इस विकल्प को प्लेसहोल्डर पर प्लेसहोल्डर पर रखा जाएगा जब कर्सर खत्म हो जाएगा (आपको अभी क्या चाहिए) प्रतीक्षा करें। यही कारण है कि इसे सॉर्ट करने के लिए आपको बहुत दूर तक स्क्रॉल करना पड़ा।

$('#content #sortable').sortable({ 
    handle: '.drag_handle', 
    placeholder: "ui-state-highlight", 
    tolerance: "pointer" 
}); 

यहाँ अद्यतन CodePen