jQuery ज़ूम

साथ खींचने योग्य div यह मेरा कोड है:jQuery ज़ूम

एचटीएमएल

<div id="canvas"> 
    <div id="dragme"></div> 
</div>

सीएसएस

#canvas { 
    width:500px; 
    height:250px; 
    border:1px solid #444; 
    zoom:0.7; 
} 
#dragme { 
    width:100px; 
    height:50px; 
    background:#f30; 
}

जे एस

$(function(){ 
    $('#dragme').draggable({containment:'parent'}) 
})

सीएसएस zoom संपत्ति का उपयोग करते समय मुझे एक बड़ा मुद्दा है। लक्ष्य ड्रैगगेबल div की स्थिति कर्सर स्थिति के साथ समन्वयित नहीं है।

क्या कोई साफ और सरल समाधान है? मुझे ज़ूम गतिशील रूप से बदलने में सक्षम होना चाहिए।

स्रोत

2011-12-22 enloz

मैंने इसे देखा है: http://stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem ... बहुत मदद नहीं। – enloz

आप ज़ूम का उपयोग क्यों कर रहे हैं? –

यह बहुत मदद क्यों नहीं है? यह वास्तव में आपकी समस्या प्रतीत होता है। –

आपको ज़ूम संपत्ति सेट करने की आवश्यकता नहीं है। मैंने अभी खींचने योग्य की स्थिति में अंतर जोड़ा जो ज़ूम संपत्ति के कारण होता है। आशा करता हूँ की ये काम करेगा।

फिडल

http://jsfiddle.net/TqUeS/

जे एस

var zoom = $('#canvas').css('zoom'); 
var canvasHeight = $('#canvas').height(); 
var canvasWidth = $('#canvas').width(); 

$('#dragme').draggable({ 
    drag: function(evt,ui) 
    { 
     // zoom fix 
     ui.position.top = Math.round(ui.position.top/zoom); 
     ui.position.left = Math.round(ui.position.left/zoom); 

     // don't let draggable get outside the canvas 
     if (ui.position.left < 0) 
      ui.position.left = 0; 
     if (ui.position.left + $(this).width() > canvasWidth) 
      ui.position.left = canvasWidth - $(this).width(); 
     if (ui.position.top < 0) 
      ui.position.top = 0; 
     if (ui.position.top + $(this).height() > canvasHeight) 
      ui.position.top = canvasHeight - $(this).height(); 

    }     
});

स्रोत

2011-12-22 17:40:07 tuze

एचएम ... उत्तर के लिए धन्यवाद, लेकिन यह काम नहीं कर रहा है। अगर मैं उदा। 'ज़ूम: 0.4' ... http://jsfiddle.net/jtnQU/1/ – enloz

मेरा बुरा। मैंने इसे अपडेट किया। – tuze

समाधान ऊपर मेरे लिए बाहर काम नहीं किया। तो मैंने अपना खुद का पाया। मैं इसे साझा करना चाहता था अगर किसी और के पास भी एक ही समस्या है।

var zoom = $('#canvas').css('zoom');  
$('#dragme').draggable({ 
    drag: function(evt,ui) 
    { 
     var factor = (1/zoom) - 1 

     ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor) 
     ui.position.left += Math.round((ui.position.left - ui.originalPosition.left) * factor) 
    }     
});

स्रोत

2014-10-23 23:08:36

एक आकर्षण की तरह काम करता है –

यह समाधान काम करता है, ऊपर नहीं! –

यह समाधान बहुत अच्छा है और इसे स्वीकार किया जाना चाहिए, क्योंकि यह कंटेनर पैरेंट ज़ूम होने के लिए सही ढंग से खाता है। धन्यवाद यूसुफ! – ryancdotnet

मैं इस्तेमाल किया दोनों Tuze की और यूसुफ Demirag के समाधान और एक ग्रिड पर खींचकर के लिए एक छोटे से कुछ कहा:

var gridSize = 20; 
$('#dragme').draggable({ 
    grid: [ gridSize , gridSize ], 
    snap: true, 
    snapTolerance: gridSize/2, 

    drag: function(event,ui){ 
     var factor = (1/zoom) -1; 

     ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor); 
     ui.position.top -= ui.position.top % gridSize; 
     ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor); 
     ui.position.left -= ui.position.left % gridSize; 


     if (ui.position.left < 0) 
      ui.position.left = 0; 
     if (ui.position.left + $(this).width() > canvasWidth) 
      ui.position.left = canvasWidth - $(this).width(); 
     if (ui.position.top < 0) 
      ui.position.top = 0; 
     if (ui.position.top + $(this).height() > canvasHeight) 
      ui.position.top = canvasHeight - $(this).height(); 
    } 
});

यह एक मामूली बग (यह कभी कभी एक सटीक मान जैसे करने के लिए नहीं मिल सकता है : 160 पीएक्स) लेकिन यह मेरी जरूरत के लिए काम किया।

उम्मीद है कि यह मदद करता है।

स्रोत

2015-09-16 07:55:45 kriskate

jQuery ज़ूम

उत्तर

संबंधित मुद्दे