ज़ूम समस्या के साथ jquery draggable

Question

मैं चुड़ैल में एक पेज पर काम कर रहा हूं, इसकी सभी सामग्री ज़ूम का उपयोग कर स्केल कर दी गई है। समस्या यह है कि जब मैं पृष्ठ में कुछ खींचता हूं तो ड्रैगिंग आइटम को खराब स्थिति मिलती है जो ज़ूम राशि के सापेक्ष लगता है।

इसे हल करने के लिए मैंने ड्रैगगेबल घटक की स्थिति पर कुछ गणित करने की कोशिश की, लेकिन ऐसा लगता है कि यह भी सही रूप से इसके सही होने पर, "सत्य" स्थिति का पुनर्मूल्यांकन नहीं हुआ।

यहाँ कुछ कोड बेहतर समझाने के लिए है:

var zoom = Math.round((parseFloat($("body").css("zoom"))/100)*10)/10;

var x = $(this).data('draggable').position; 
$(this).data('draggable').position.left = Math.round(x.left/zoom); 
$(this).data('draggable').position.top = Math.round(x.top/zoom); 

किसी भी मदद की बहुत सराहना की जाएगी

Answer 1

आप खाते में पुस्तक की स्थिति, मार्जिन और गद्दी ले रहे हैं? जैसे:

x.left + 
parseInt($(this).css('margin-left')) + 
parseInt($(this).css('padding-left')) + 
parseInt($(this).parent().scrollLeft()); 

x.top + 
parseInt($(this).css('margin-top')) + 
parseInt($(this).css('padding-top')) + 
parseInt($(this).parent().scrollTop()); 

फिर आवश्यकतानुसार ज़ूम मान के लिए समायोजन?

Answer 2

इसे ठीक करने के लिए बहुत समय और प्रयास लिया, लेकिन अंत में, मेरे पास एक समाधान है जो काम करता है।

यह समाधान फ़ायरफ़ॉक्स और आईई दोनों के लिए काम करता है। #canvas div है जिसमें ड्रैगगेबल होता है। ध्यान दें कि हमें यह सुनिश्चित करना है कि तत्व मैन्युअल रूप से कैनवास के अंदर रहते हैं।

यह भी काम करता है अगर कैनवास के बाकी पृष्ठ की तुलना में एक अलग ज़ूम स्तर है।

var pointerX; 
var pointerY; 
$(c).draggable({ 
    start : function(evt, ui) { 
    pointerY = (evt.pageY - $('#canvas').offset().top)/zoom - parseInt($(evt.target).css('top')); 
    pointerX = (evt.pageX - $('#canvas').offset().left)/zoom - parseInt($(evt.target).css('left')); 
    }, 
    drag : function(evt, ui) { 
    var canvasTop = $('#canvas').offset().top; 
    var canvasLeft = $('#canvas').offset().left; 
    var canvasHeight = $('#canvas').height(); 
    var canvasWidth = $('#canvas').width(); 

    // Fix for zoom 
    ui.position.top = Math.round((evt.pageY - canvasTop)/zoom - pointerY); 
    ui.position.left = Math.round((evt.pageX - canvasLeft)/zoom - pointerX); 

    // Check if element is outside 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(); 

    // Finally, make sure offset aligns with position 
    ui.offset.top = Math.round(ui.position.top + canvasTop); 
    ui.offset.left = Math.round(ui.position.left + canvasLeft); 
    } 
}); 

Answer 3

भविष्य में संदर्भ के लिए - किसी को कभी एक ही समस्या का सामना किया जाएगा अगर - एक ऐसी ही सवाल + काम कर जवाब here पाया जा सकता है।

Answer 4

मैं कुछ घंटों के लिए इसके साथ संघर्ष कर रहा था। मेरे पास एक ग्रिड था जहां मैंने फ़ॉन्ट आकार (कंटेनर पर 125% आदि) सेट करके इसे स्केलिंग के साथ शुरू किया था। यह तब तक अच्छा काम करता है जब तक कि मैं उन छवियों में नहीं आया जो ग्रिड के साथ स्केल नहीं करते थे।

सोचा कि मैं इसके बजाय ज़ूम का उपयोग करूंगा और यह शानदार ढंग से काम करता है। तब मैं ड्रैगगेबल/ड्रॉपपेबल द्वारा इसका उपयोग कर रहा था, इसके साथ स्केल नहीं कर रहा था .. jqueryUI ऑब्जेक्ट्स को नष्ट करने और फिर से जोड़ने में कई घंटे बिताएं लेकिन कुछ भी काम नहीं किया।

फिर अंततः मुझे एहसास हुआ कि मैं छवियों के लिए ग्रिड और सीएसएस-ज़ूम ज़ूम करने के लिए फ़ॉन्ट आकार के संयोजन का उपयोग कर सकता हूं। अब सबकुछ काम करता है और मैं jQueryUI के उसी उदाहरण के साथ ड्रैग/ड्रॉप कर सकता हूं।

आशा है कि यह दृष्टिकोण किसी और की मदद करेगा। :-)

Answer 5

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);  
     }     
    }); 

Answer 6

तो सीएसएस ज़ूम एचटीएमएल शरीर पर विशेष रूप से किया जाता है, वहाँ एक बहुत ही आसान ठीक है, लेकिन यह स्रोत को संशोधित करने की आवश्यकता है। यह कुछ के लिए नहीं है, लेकिन मैं वैसे भी समाधान पोस्ट करूंगा।

तो jQuery UI की खींचने योग्य कार्यक्षमता _generatePosition नामक विधि का उपयोग करके माउसपॉजिशन को निकालती है। समस्या यह है कि यह ज़ूम इन खाता (duh) नहीं लेता है, इसलिए हमें केवल ज़ूम स्तर से अपना परिणाम विभाजित करना होगा और सब कुछ काम करेगा।

तो यह बारी:

return { 
     top: (

      // The absolute mouse position 
      pageY - 

      // Click offset (relative to the element) 
      this.offset.click.top - 

      // Only for relative positioned nodes: Relative offset from element to offset parent 
      this.offset.relative.top - 

      // The offsetParent's offset without borders (offset + border) 
      this.offset.parent.top + 
      (this.cssPosition === "fixed" ? 
       -this.offset.scroll.top : 
       (scrollIsRootNode ? 0 : this.offset.scroll.top)) 
     )/ , 
     left: (

      // The absolute mouse position 
      pageX - 

      // Click offset (relative to the element) 
      this.offset.click.left - 

      // Only for relative positioned nodes: Relative offset from element to offset parent 
      this.offset.relative.left - 

      // The offsetParent's offset without borders (offset + border) 
      this.offset.parent.left + 
      (this.cssPosition === "fixed" ? 
       -this.offset.scroll.left : 
       (scrollIsRootNode ? 0 : this.offset.scroll.left)) 
     ) 
    }; 

में

var zoomLevel = parseFloat($('body').css("zoom") || "1.0"); 

    return { 
     top: (

      // The absolute mouse position 
      pageY - 

      // Click offset (relative to the element) 
      this.offset.click.top - 

      // Only for relative positioned nodes: Relative offset from element to offset parent 
      this.offset.relative.top - 

      // The offsetParent's offset without borders (offset + border) 
      this.offset.parent.top + 
      (this.cssPosition === "fixed" ? 
       -this.offset.scroll.top : 
       (scrollIsRootNode ? 0 : this.offset.scroll.top)) 
     )/zoomLevel, 
     left: (

      // The absolute mouse position 
      pageX - 

      // Click offset (relative to the element) 
      this.offset.click.left - 

      // Only for relative positioned nodes: Relative offset from element to offset parent 
      this.offset.relative.left - 

      // The offsetParent's offset without borders (offset + border) 
      this.offset.parent.left + 
      (this.cssPosition === "fixed" ? 
       -this.offset.scroll.left : 
       (scrollIsRootNode ? 0 : this.offset.scroll.left)) 
     )/zoomLevel 
    }; 

सब है कि। मैं इसे एक विशिष्ट नाम के तहत सहेजने का सुझाव देता हूं ताकि इसे आसानी से पहचाना जा सके कि इसे संशोधित किया गया है। उदाहरण के लिए: jquery-ui.ZOOMFIX.js

मैं निम्नलिखित पैकेज से jquery-ui.js फ़ाइल का प्रयोग किया:। जब जूम नहीं है https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip