jQuery ड्रैगगेबल का उपयोग कर एक div क्लिपिंग मास्क के भीतर एक ज़ूम की गई छवि खींचें?

Question

मैं एक छवि को एक छवि पर ज़ूम इन करने और क्लिपिंग मास्क div के भीतर ज़ूम किए गए संस्करण को खींचने के लिए एक इंटरफ़ेस बना रहा हूं।

मेरे पास एक div 200px by 200px है जो मैंने ओवरफ़्लो सेट किया है: छुपा हुआ है। फिर मैं 1000px by 1000px कहता हूं कि div में एक std img (<img src="etc">) लोड करता है।

तो मैं का उपयोग jQuery

$("#my-image").draggable({ containment: [-85,83,99,222] }); 

संख्या कठिन कोडित रहे हैं। अब तक मैं उन्हें केवल परीक्षण और त्रुटि से ढूंढ सकता हूं ...

समस्या यह है कि प्रत्येक बार जब मैं पृष्ठ में परिवर्तन करता हूं (मैं अपने कंटेनर div के ऊपर एक और तत्व डालता हूं) पृष्ठ आकार में परिवर्तन और मेरे हार्ड कोडित [ x1, y1, x2, y2] सही ढंग से काम करना बंद करो।

मुख्य मुद्दा मैं पूरी तरह से समझ में नहीं आता [x1, y1, x2, y2] है ...

यहाँ इस बारे में jQuery डॉक्स है:

http://docs.jquery.com/UI/Draggable#option-containment 

मैं सोच में सही हूँ कि x1 बाएं सबसे अधिक खींचने योग्य बिंदु है, x2 सही ड्रैगगेबल पॉइंट सही है? (और y1 & y2 के लिए समान)?

यदि हां, तो गतिशील रूप से उनकी गणना करने के लिए सबसे अच्छी रणनीति क्या होगी?

इसके अलावा, "एक div क्लिपिंग मुखौटा के अंदर एक ज़ूम की गई छवि खींचें" की मुख्य समस्या के लिए कोई अन्य त्वरित और आसान समाधान बहुत सराहना की जाएगी।

Answer 1

ठीक है। मुझे यह अब मिल गया है। यह एक div clping मुखौटा के भीतर एक खींचने योग्य छवि को स्थापित करने के लिए है ताकि यह पूरी तरह से गतिशील है और इससे कोई फर्क नहीं पड़ता कि आप पृष्ठ का आकार कैसे बदलते हैं।

HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;"> 
    <img id="my-image" src="big-image.jpg" width="1000" height="1000"/> 
</div> 

jQuery/जावास्क्रिप्ट

// Make sure it always starts @ zero position for below calcs to work 
$("#my-image").css({top: 0, left: 0}); 

var maskWidth = $("#my-mask").width(); 
var maskHeight = $("#my-mask").height(); 
var imgPos  = $("#my-image").offset(); 
var imgWidth = $("#my-image").width(); 
var imgHeight = $("#my-image").height(); 

var x1 = (imgPos.left + maskWidth) - imgWidth; 
var y1 = (imgPos.top + maskHeight) - imgHeight; 
var x2 = imgPos.left; 
var y2 = imgPos.top; 

$("#my-image").draggable({ containment: [x1,y1,x2,y2] }); 
$("#my-image").css({cursor: 'move'}); 

आशा इस कोई मदद करता है!

Answer 2

$(this).draggable({ 
    drag: function(event, ui) { 
     if (ui.position.top > 0) { 
      ui.position.top = 0; 
     } 
     var maxtop = ui.helper.parent().height() - ui.helper.height(); 
     if (ui.position.top < maxtop) { 
      ui.position.top = maxtop; 
     } 
     if (ui.position.left > 0) { 
      ui.position.left = 0; 
     } 
     var maxleft = ui.helper.parent().width() - ui.helper.width(); 
     if (ui.position.left < maxleft) { 
      ui.position.left = maxleft; 
     } 
    } 
});