jQuery Drag/Resize with CSS Transform Scale

這個問題集中在將jQuery 可拖曳和可調(diào)整大小插件應用於具有CSS 變換的div 中的子元素的問題（矩陣）應用於它。當拖曳子元素或調(diào)整其大小時，就會出現(xiàn)問題，因為 jQuery 所做的調(diào)整與滑鼠位置不同步，其影響因素與所應用的比例相對應。

解決方案

之後經(jīng)過一些實驗，用戶找到了一個解決方案，涉及修補 jQuery 的可拖曳和可調(diào)整大小的插件。以下是修補程式碼的摘要：

• Monkey Patching mouseStart()：此修補程式可確保透過根據(jù)滑鼠偏移調(diào)整正確計算輔助元素的位置。元素的變換比例。
• getViewOffset()：此函數(shù)有助於正確計算應用變換下元素的偏移量。

jQuery 拖曳/調(diào)整大小補丁

以下程式碼示範了jQuery UI 的可拖曳外掛程式中mouseStart() 和generatePosition() 函數(shù)的修改：

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

對於那些尋求作為處理拖放和調(diào)整大小功能的jQuery 替代方案，這裡有一些需要考慮的選項：

• Vanilla JavaScript： 您可以使用本機JavaScript 事件實作拖放功能。
• React.js: React 提供了一組像 useDrag 和 useResize 這樣的鉤子來管理這些互動。
• Vue.js: Vuex 支援拖曳透過 useDrag() 鉤子進行拖曳互動。

進一步改進

使用者也提供了一個涉及 jQuery 外掛程式內(nèi)回調(diào)處理程序的解決方案。此方法不需要修補插件程式碼，並在拖曳和調(diào)整大小操作期間利用比例因子來調(diào)整寬度、高度和位置。

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

此替代方法是管理拖曳和調(diào)整大小事件的便利解決方案在應用了變換比例的元素中，無需修改 jQuery 插件本身。

以上是如何讓 jQuery 拖曳/調(diào)整大小與 CSS 變換比例一起使用？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！