jQuery ड्रैग/रीसाइज विद सीएसएस ट्रांसफॉर्म स्केल

समस्या: सीएसएस ट्रांसफॉर्म लागू करते समय, विशेष रूप से ट्रांसफॉर्म: मैट्रिक्स (0.5, 0, 0, 0.5, 0, 0);, एक div के लिए और चाइल्ड एलिमेंट्स पर jQuery के ड्रैगगेबल() और रिसाइजेबल() प्लगइन्स का उपयोग करने पर, jQuery द्वारा किया गया परिवर्तन माउस स्थिति के साथ "सिंक से बाहर" हो जाता है।

समाधान: jQuery प्लगइन्स को पैच करना

jQuery प्लगइन्स को पैच करके एक समाधान पाया गया, विशेष रूप से $.ui.draggable के _mouseStart और _generatePosition तरीकों को। यह दृष्टिकोण प्रभावी ढंग से काम करता है लेकिन मूल प्लगइन कोड को संशोधित करने की आवश्यकता होती है। सीधे jQuery प्लगइन्स। कॉलबैक हैंडलर का उपयोग करके, वर्तमान ज़ूम स्केल के आधार पर खींचने योग्य और आकार बदलने योग्य तत्वों की स्थिति और आकार को समायोजित करना संभव है।

आकार बदलने योग्य के लिए ट्रांसफॉर्म स्केल फिक्स:

$(यह).आकार बदलने योग्य({ न्यूनतम चौड़ाई: -(contentElem.width()) * 10, न्यूनतम ऊँचाई: -(contentElem.height()) * 10, आकार बदलें: फ़ंक्शन (इवेंट, यूआई) { // ज़ूम स्केल के आधार पर चौड़ाई और ऊंचाई समायोजित करें var ChangeWidth = ui.size.width - ui.originalSize.width; var newWidth = ui.originalSize.width परिवर्तनविड्थ / ज़ूमस्केल; var परिवर्तन ऊँचाई = ui.size.height - ui.originalSize.height; var newHeight = ui.originalSize.height चेंजहाइट / ज़ूमस्केल; ui.size.width = newWidth; ui.size.height = newHeight; } });

ड्रैगेबल के लिए ट्रांसफॉर्म स्केल फिक्स:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10, 
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Adjust width and height based on zoom scale
        var changeWidth = ui.size.width - ui.originalSize.width;
        var newWidth = ui.originalSize.width   changeWidth / zoomScale;

        var changeHeight = ui.size.height - ui.originalSize.height;
        var newHeight = ui.originalSize.height   changeHeight / zoomScale;

        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

यह दृष्टिकोण किसी भी मुख्य कार्यक्षमता को संशोधित किए बिना jQuery का उपयोग करके स्केल किए गए तत्वों के भीतर ड्रैग और आकार बदलने की घटनाओं को संभालने के लिए एक स्वच्छ और गैर-आक्रामक समाधान प्रदान करता है।