ड्रैगगेबल व्यवहार को प्रोग्रामेटिक रूप से ट्रिगर करने के लिए कैसे करें

Question

मैंने jQuery में "2 डी स्लाइडर" बनाया है जिसमें 2 पैरामीटर एक बाउंडिंग बॉक्स में "हैंडल" खींचकर एक साथ छेड़छाड़ किए जाते हैं।

मैंने इसे एक पैरेंट div के भीतर "हैंडल" div को घोंसला करके और ड्रैगिंग व्यवहार को सुविधाजनक बनाने के लिए jQuery UI प्लगइन का उपयोग करके इसे कार्यान्वित किया है। एचटीएमएल लगता है:

<div class="Slider2d" id="grid_spacing_both"> 
    <div class="Slider2dHandle" id="grid_spacing_both_handle"></div> 
</div> 

jQuery लगता है:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 
}); 

:

$(".Slider2dHandle").draggable({ 
    containment: "parent", 
    scroll: false, 
    drag: function(event, ui) { 
     // calculates position and updates value input boxes 
    } 
}); 

मैं भी कुछ कोड है कि माता-पिता div के भीतर किसी भी क्लिक के स्थान पर संभाल पुनर्स्थानापन्न बना लिया है

मैं जो करना चाहता हूं वह उपर्युक्त विधि को संशोधित करता है ताकि उपयोगकर्ता पैरेंट div में कहीं भी क्लिक कर सकें, हैंडल को क्लिक स्थान पर पुनर्स्थापित किया गया हो, और फिर बिना लेटिन के हैंडल खींचना शुरू करें माउस बटन ऊपर। असल में, मुझे ड्रैग कार्यक्षमता प्रोग्रामेटिक रूप से ट्रिगर करने का एक तरीका पता लगाने की आवश्यकता है।

मैं कुछ सुझाव here और here पाया है, और इसलिए की तरह उपरोक्त विधि बदलकर अपने सिफारिशों को लागू करने का प्रयास किया:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 
    handle = $(".Slider2d").children(".Slider2dHandle"); 
    handle.trigger(event); 
}); 

यह सबसे तकनीकी अर्थ में काम करता है, लेकिन इसकी सुपर धीमी गति से और मैं एक मिल सफारी से त्रुटि संदेशों का गुच्छा मुझे बता रहा है "रेंज एरर: अधिकतम कॉल स्टैक आकार पार हो गया।" जो मैं सोच रहा हूं वह यह हो रहा है कि जब मैं हैंडल पर ईवेंट ट्रिगर करता हूं, तो यह पैरेंट पर बुलबुला होता है, जो फिर ट्रिगर को फिर से कॉल करता है। मैंने एक ईवेंट फेंक कर बुलबुले को रोकने की कोशिश की है। StipPropagation .trigger() कॉल से पहले और बाद में मेरे कोड में, लेकिन इसका कोई फायदा नहीं हुआ।

तो, अगर किसी को यह काम करने के तरीके पर कोई सुझाव है तो मैं वास्तव में इसकी सराहना करता हूं। मेरे पास बैकअप योजना here है, लेकिन ऐसा लगता है कि मुझे अनावश्यक रूप से जटिल होना चाहिए।

धन्यवाद!

Answer 1

मैं यह काम करने में कामयाब रहा। जैसा कि मुझे संदेह था, इवेंट हैंडलिंग के साथ इसका कुछ संबंध था।

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

कम से कम मुझे लगता है कि यह क्या हो रहा है। किसी भी मामले में, यहां कोड है जो काम करता है:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle"); 
    if ($(this).attr("id") == $(event.target).attr("id")) { 
     handle.trigger(event); 
    } 
}); 

Answer 2

यह मेरे लिए काम नहीं करता है, इसलिए मुझे लगता है कि मैं कुछ गलत कर रहा हूं। लेकिन मैं सोच रहा था कि वह आपके लिए काम करता है, यही कारण है कि सेट नहीं:

if ($(this).attr("id") == $(event.target).attr("id")) 

इस के लिए:

if (this === event.target) 

मैं एक बार मैं यह पता लगा अपडेट करेंगे।

अभी भी कुछ नहीं: उस अनंत लूप के दौरान, event.target स्लाइडर के रूप में बनी हुई है, हैंडल नहीं, केवल तभी दूसरी घटना वास्तव में ट्रिगर होती है।

संपादित करें: समझ गया, मैंने jQuery 1.7.1 से 1.6.4 तक स्विच किया और यह काम करता है।

Answer 3

या आप हैंडलर के मूसडाउन घटना में प्रचार को रोक सकते हैं, इसलिए यह स्लाइडर के मूसडाउन घटना तक बुलबुला नहीं करता है।

$(".Slider2d").mousedown(function(event) { 
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle"); 
    handle.trigger(event); 
}); 

$(".Slider2dHandle").mousedown(function(event) { 
    event.stopPropagation(); 
});