CSS ?? ??? ??? jQuery ???/?? ??

? ??? CSS ??? ?? div ?? ?? ??? jQuery ??? ?? ? ?? ?? ?? ????? ???? ??? ?? ????. (??)? ???????. ??? ?? ??? ?????? ??? ??? ? ?????. jQuery?? ??? ??? ??? ??? ???? ??? ?? ??? ??? ????? ?? ?????.

???

?? ? ?? ??? ?? ???? jQuery? ??? ???? ?? ?? ??? ????? ???? ?? ??? ???? ?????. ??? ??? ??? ??? ????.

• Monkey Patching mouseStart(): ? ??? ??? ???? ???? ??? ???? ???? ??? ??? ??? ???? ????? ?????. ??? ?? ??.
• getViewOffset(): ? ??? ??? ???? ??? ???? ???? ???? ? ??? ???.

jQuery ???/?? ?? ??

?? ??? jQuery UI? ??? ??? ?????? mouseStart() ? generatePosition() ??? ?? ??? ?????.

function monkeyPatch_mouseStart() {

  // Monkey patch mouseStart function

  $.ui.draggable.prototype._mouseStart = function(event) {
    
    // Calculate adjusted offset
    this.offset = this.positionAbs = getViewOffset(this.element[0]);
  }

}

function generatePosition(event) {

  // Calculate adjusted position
  this.top = (
    pageY                               // Absolute mouse position
    - this.offset.click.top                         // Click offset
    - this.offset.relative.top                        // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( this.scrollParent.scrollTop() ) ))
  );

  this.left = (
    pageX                                // Absolute mouse position
    - this.offset.click.left                        // Click offset
    - this.offset.relative.left                       // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.scrollParent.scrollLeft() ))
  );
}

jQuery? ??

??? ? ?? ?? ??? ???? ?? jQuery? ???? ???? ? ? ?? ??? ??? ????.

• ??? JavaScript: ?? JavaScript ???? ???? ??? ? ?? ??? ??? ? ????.
• React.js: React? ??? ????? ???? ?? useDrag ? useResize? ?? ?? ??? ?????.
• Vue.js: Vuex? ???? ?????. useDrag() ??? ?? ?? ? ?? ?? ??.

?? ??

???? jQuery ???? ?? ?? ???? ??? ???? ?????. ? ??? ???? ?? ??? ???? ??? ??? ? ?? ?? ?? ?? ?? ??? ???? ??, ?? ? ??? ?????.

// Resizable callback handler
$(this).resizable({
    ...
    resize: function(event, ui) {
        // Adjust width and height relative to scale
        ui.size.width = ui.originalSize.width + (ui.size.width - ui.originalSize.width) / zoomScale;
        ui.size.height = ui.originalSize.height + (ui.size.height - ui.originalSize.height) / zoomScale;
    }
});

// Draggable callback handler
$(this).draggable({
    ...
    drag: function(event, ui) {
        // Adjust position relative to scale
        ui.position.left = ui.originalPosition.left + (ui.position.left - ui.originalPosition.left) / zoomScale;
        ui.position.top = ui.originalPosition.top + (ui.position.top - ui.originalPosition.top) / zoomScale;
    }
});

? ?? ??? ??? ? ?? ?? ???? ???? ?? ??? ??????. jQuery ???? ??? ???? ?? ?? ???? ??? ????.

? ??? jQuery ???/?? ??? CSS Transform Scale? ?? ????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!