jQuery Drag/Resize with CSS Transform Scale

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

解決方案

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

• Monkey Patching mouseStart()：此修補程序可確保通過根據(jù)鼠標(biāo)偏移調(diào)整正確計算輔助元素的位置。元素的變換比例。
• getViewOffset()：此函數(shù)有助于正確計算應(yīng)用變換下元素的偏移量。

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 事件實現(xiàn)拖放功能。
• 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)整大小事件的便捷解決方案在應(yīng)用了變換比例的元素中，無需修改 jQuery 插件本身。

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