निश्चित एक्स और वाई धुरी के साथ jQuery खींचने योग्य कैसे करें?

Question

मुझे आश्चर्य है कि jQuery खींचने योग्य बनाने के लिए केवल एक रास्ता सीधे, नीचे और बाएं खींचने के लिए है, ठीक है। मैं उपयोगकर्ता को एक div को तिरछे खींचने से रोकना चाहता हूं। ड्रैगगेबल यूआई में ग्रिड विकल्प का उपयोग करना मेरी स्थिति में संभव नहीं है।

http://jqueryui.com/demos/draggable/#constrain-movement

यह कैसे संभव है?

धन्यवाद!

Answer 1

मैंने एक प्लगइन लिखा जो दोनों अक्षों में खींचने योग्य को स्थानांतरित करने की अनुमति देता है। यह काम पूरा हो जाता है लेकिन यह एक साधारण jQuery प्लगइन की बजाय jQuery UI widget के रूप में बेहतर ढंग से कार्यान्वित किया जाएगा।

की मेजबानी डेमो: http://jsbin.com/ugadu/1 (http://jsbin.com/ugadu/1/edit के माध्यम से संपादन योग्य)

प्लगइन कोड:

$.fn.draggableXY = function(options) { 
    var defaultOptions = { 
    distance: 5, 
    dynamic: false 
    }; 
    options = $.extend(defaultOptions, options); 

    this.draggable({ 
    distance: options.distance, 
    start: function (event, ui) { 
     ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0}); 
     ui.helper.data('draggableXY.newDrag', true); 
    }, 
    drag: function (event, ui) { 
     var originalPosition = ui.helper.data('draggableXY.originalPosition'); 
     var deltaX = Math.abs(originalPosition.left - ui.position.left); 
     var deltaY = Math.abs(originalPosition.top - ui.position.top); 

     var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag'); 
     ui.helper.data('draggableXY.newDrag', false); 

     var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax'); 
     ui.helper.data('draggableXY.xMax', xMax); 

     var newPosition = ui.position; 
     if(xMax) { 
     newPosition.top = originalPosition.top; 
     } 
     if(!xMax){ 
     newPosition.left = originalPosition.left; 
     } 

     return newPosition; 
    } 
    }); 
}; 

Answer 2

मेरे पास आपके लिए सही कोड नहीं है, लेकिन मैं आपको थोड़ा और गहराई से समस्या के बारे में सोचने में मदद करके सही दिशा में आपको इंगित करने में सक्षम हो सकता हूं।

तो उपयोगकर्ता एक अनियंत्रित वस्तु खींचने के लिए शुरू होता है। वस्तु, प्रारंभिक बिंदु से एक पिक्सेल दूर जाती है के रूप में अगर पहला पिक्सेल इन चार (एक्स, y) निर्देशांक, जहां एक्स और y प्रारंभिक बिंदु हैं में से किसी में है: (एक्स -1, y -1), (एक्स -1, y +1), (एक्स +1, y -1) या (एक्स -1, y +1), यह अभी भी स्पष्ट नहीं है कि उपयोगकर्ता किस तरह से जाने का मतलब है, उदाहरण के लिए, i f वस्तु एक नीचे और बाईं ओर है, यह बताना असंभव है कि बाधा x या y अक्ष पर होनी चाहिए या नहीं।

एक बार जब आप एक से अधिक पिक्सल दूर जाते हैं, तो यह आसान हो जाता है। लेकिन आपको अभी भी पिक्सेल निर्देशांक पर कुछ गोल करना है, जहां उपरोक्त निर्देशांक में, abs (xoffset) == abs (yoffset), फिर आप बाधा लागू करने के लिए एक ईवेंट को आग लगा सकते हैं जब x और/या वाई दूरी कुछ मनमाने ढंग से छोटे पूर्णांक से अधिक हैं, "3" कहें।

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

यह एक दिलचस्प चुनौती है और यदि आप यह समझते हैं कि यह कैसे करना है तो यह एक अच्छा सीखने का अनुभव है।

Answer 3

अपने लाभ के

$('.selector').draggable({ 
    drag: function(event, ui) { ... } 
}); 

करने के लिए ड्रैग घटना का उपयोग मैं 100% यकीन है कि कैसे नहीं कर रहा हूँ, लेकिन अंदर यहाँ, आप निर्देशांक पर एक जाँच कर सकते हैं। ~ जैक-लैपलेंट ने कहा, यह वह जगह है जहां आप तुलना करेंगे। यदि निर्देशांक y से एक्स अक्ष के करीब हैं, अक्ष के लिए एक्स

//setter 
$('.selector').draggable('option', 'axis', 'x'); 

बदलते हैं दूसरी तरह के आसपास y के लिए इसे बदल। इससे आपको हमेशा एक्स अक्ष या वाई धुरी (प्रारंभ बिंदु से) पर आइटम रखने के लिए एक स्नैपिंग गति मिल जाएगी। धुरी कहने पर आपको आइटम छोड़ने के लिए एक चेक करना होगा (एक्स + एन, वाई + एन), लेकिन अगर किसी को कुछ पिक्सल पर रहना पड़ता है तो यह बहुत प्रभावशाली होगा। x | = | y | लाइन।

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

आप वास्तव में क्या खींचने की कोशिश कर रहे हैं जो विकर्ण नहीं जा सकता है, लेकिन बाएं, दाएं, ऊपर और नीचे जा सकता है?

Answer 4

मैं इस जवाब को बहुत अधिक कहने के बाद पोस्ट कर रहा हूं कि के साथ यह संभव नहीं है jqueryui ऑब्जेक्ट पर कॉल करता है। ऐसा लगता है कि जब आप पहले से खींच रहे हैं तो यह आपको संयम अक्ष को बदलने की अनुमति नहीं देगा।

कृपया मुझे गलत साबित करें?

Answer 5

jQueryUI एक निश्चित ट्रैक पर खींच नियंत्रित करने के लिए दो तरीकों का समर्थन करता है।

1. आप एक विशेष अक्ष पर आंदोलन खींच सीमित करने के लिए अक्ष विकल्प का उपयोग कर सकते हैं। उदाहरण के लिए:

   $('.draggable_horiz').draggable({axis: "x"}); 
   

   अधिक यहाँ जानकारी: http://api.jqueryui.com/draggable/#option-axis

2. आपको कोई ऐसा तत्व या x/y निर्देशांक कि बाउंडिंग बॉक्स को परिभाषित की एक सरणी का उपयोग कर आंदोलन के लिए विवश कर सकते हैं।

   $('.draggable_track').draggable({ containment: [0,0, 250, 24] }); 
   
   or to just use the parent element as a reference track: 
   
       $('.draggable_track').draggable({ containment: 'parent' }); 
   

   अधिक यहाँ जानकारी: http://api.jqueryui.com/draggable/#option-containment

मुझे आशा है कि इस मदद करता है।