2012-03-21 9 views
12

मैंने अपनी समस्या के समाधान के लिए STACKOVERFLOW और अन्य फ़ोरम खोजे हैं - अगर मुझे एक समाधान समाधान याद आया है तो कृपया मुझे इसकी ओर इशारा करें।Jquery UI sortable - ईवेंट की आग शुरू करने से पहले कार्रवाई करें

मेरी समस्या: जब भी मेरी क्रमबद्ध सूची में कोई तत्व (एक पोर्टलेट div) खींच रहा है, तो मुझे वास्तविक ड्रैग प्रक्रिया शुरू होने से पहले कुछ क्रियाएं करने की आवश्यकता होती है (स्टार्ट इवेंट से पहले जो मैंने समझ लिया है उससे)।

अधिक विशिष्ट होने के लिए: मेरी डीआईवी उपयोगकर्ता को अपने शरीर को बढ़ाने/पतन करने की संभावना प्रदान करती है (उदाहरण के लिए jquery UI पृष्ठ http://jqueryui.com/demos/sortable/#portlets पर प्रतीत होता है)।

जब भी कोई तत्व खींचता है तो मैं अपनी पतन विधि को ट्रिगर करना चाहता हूं ताकि खींचने वाला एकमात्र दृश्य तत्व ढह गया डीआईवी हो।

हालांकि जब भी मैं अपने विधि (कुछ इस तरह)

$someitem.trigger("toggle.somenamespace") 

यह काम करता है के रूप में उम्मीद है, सिवाय इसके घसीटा सहायक की ऊंचाई की गणना की जाती है कि पहले शुरू घटना sortable और इसलिए सहायक में निकाल दिया जाता है फोन मूल तत्व की ऊंचाई अपने गैर-ध्वस्त राज्य में है।

इस पर मेरा मूल विचार था: जैसा कि क्रमबद्ध है उदा। वास्तविक ड्रैग प्रक्रिया शुरू होने से पहले ड्रैग दूरी को मापने की संभावना (विकल्प के साथ: दूरी) यह इस प्रवाह में संभव हुक होना चाहिए, उदाहरण के लिए मूल स्टार्ट ड्रैग फ़ंक्शन (या जिसे भी कहा जाता है) को सॉर्ट करने योग्य एक अस्थायी var में विजेट, इसे एक कस्टम कॉलबैक के साथ ओवरराइड करें जो पहले मेरी पतन कार्यक्षमता को ट्रिगर करता है और फिर यह सुनिश्चित करने के लिए मूल फ़ंक्शन को कॉल करता है कि ऊंचाई की गणना सही ढंग से की जाती है। हालांकि - मुझे इस दृष्टिकोण के साथ अब तक बहुत सफलता नहीं मिली है ...

कृपया ध्यान दें कि सॉर्ट करने योग्य के किसी ईवेंट को ड्रैग या ओवर के लिए हैंडलर में सीएसएस गुणों को सेट करना वांछित प्रभाव नहीं है, ऊंचाई सहायक के लिए गणना क्रमबद्ध विजेट तत्व गुणों के रूप में सेट है।

या - शायद ड्रैग प्रक्रिया के दौरान प्रदर्शित होने वाले सहायक की ऊंचाई को प्रभावित करने के लिए कोई बेहतर तरीका जानता है, यह मेरी राय है कि मेरा मूल दृष्टिकोण (ड्रैग प्रक्रिया से पहले तत्व को बदलना और फिर विजेट को करना अपनी गणना जिस तरह से यह intented था) एक बेहतर समाधान होगा ... किसी भी सहायता की, मथायस

संपादित करें के लिए

धन्यवाद: sortable ध्वज की स्थापना: सत्य पर forceHelperSize और ui.item/सहायक की स्थापना शुरुआत में आकार ड्रैगनहैंडर या तो काम नहीं करता है, क्योंकि इसके परिणामस्वरूप वांछित प्रभाव होता है (केवल ध्वस्त वस्तु को खींचा जाता है, लेकिन तत्व को सभी तरह से खींचने से रोकता है (जैसे कि आइटम में अभी भी इसकी असंगत स्थिति में ऊंचाई होगी) एक सहायक के साथ परीक्षण किया गया: 'मूल' और 'क्लोन'

उत्तर

13

मैंने एक खोज की है इस "समाधान" के लिए लंबे समय:

$('.handle').each(function() { 
    $(this).mousedown(function() { 
     $(this).parent().parent().children('ol').hide('blind', 500); 
    }); 
}); 

आप संभाल mousedowning द्वारा एक घटना को ट्रिगर और छिपाने जो चाहो कर सकते हैं। फिर मेरे उदाहरण 501 में छुपा एनीमेशन की अवधि से अधिक मूल्य के क्रमबद्ध करने के विकल्प विलंब को सेट करें।

यह एक सुरुचिपूर्ण समाधान नहीं है, लेकिन यह काम करता है - कम से कम मेरे कार्यक्रम में।

+0

बल्कि एक प्रत्येक कर की तुलना में, यह बेहतर होगा mousedown में '.handle' का चयन करने के लिए और फिर $ का उपयोग (यह) mousedown समारोह के अंदर जो सही तत्व का संदर्भ देना चाहिए? –

+0

आपको मूसमोव की भी जांच करनी चाहिए। मूसडाउन का मतलब सामान्य क्लिक हो सकता है। – Blaise

10

आप ऐसा कर सकते हैं, लेकिन यह jQuery यूआई के आगामी संस्करणों के लिए भविष्य सबूत नहीं है:

var oldMouseStart = $.ui.sortable.prototype._mouseStart; 
$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) { 
    this._trigger("CustomBeforeStart", event, this._uiHash()); 
    oldMouseStart.apply(this, [event, overrideHandle, noActivation]); 
}; 

You can then use the new event when setting up the sortable: 

$(".whatever").sortable({ 
    "CustomBeforeStart":function(e, ui) { 
    } 
    ... 
}); 
संबंधित मुद्दे