سحب/تغيير حجم jQuery باستخدام مقياس تحويل CSS

المشكلة: عند تطبيق تحويل CSS، قم بالتحويل على وجه التحديد: المصفوفة (0.5، 0، 0، 0.5، 0، 0)؛، إلى div وباستخدام إضافات jQuery القابلة للسحب () والقابلة لتغيير الحجم () على العناصر الفرعية، يصبح التغيير الذي يتم إجراؤه بواسطة jQuery "غير متزامن" مع موضع الماوس.

الحل: تصحيح المكونات الإضافية لـ jQuery

تم العثور على حل عن طريق تصحيح المكونات الإضافية لـ jQuery، وتحديدًا طريقتي _mouseStart و_generatePosition لـ $.ui.draggable. نجح هذا الأسلوب بشكل فعال ولكنه يتطلب تعديل رمز البرنامج المساعد الأصلي.

الحل البديل: استخدام معالجات رد الاتصال

ومع ذلك، تم اكتشاف حل أمثل لا يتطلب تعديل الإضافات jQuery مباشرة. من خلال استخدام معالجات رد الاتصال، من الممكن ضبط مواضع وأحجام العناصر القابلة للسحب وتغيير الحجم بناءً على مقياس التكبير/التصغير الحالي.

إصلاح مقياس التحويل للعناصر القابلة لتغيير الحجم:

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

إصلاح مقياس التحويل للسحب:

$(this).draggable({
    handle: '.drag-handle', 
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    }, 
    drag: function(event, ui) {
        // Adjust left and top positions based on zoom scale
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var newLeft = ui.originalPosition.left   changeLeft / (( zoomScale));

        var changeTop = ui.position.top - ui.originalPosition.top;
        var newTop = ui.originalPosition.top   changeTop / zoomScale;

        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

يوفر هذا الأسلوب حلاً نظيفًا وغير جراحي للتعامل مع أحداث السحب وتغيير الحجم ضمن العناصر المقاسة باستخدام jQuery دون تعديل أي من وظائفه الأساسية.