如何讓 jQuery 拖曳/調整大小與 CSS 變換比例一起使用？-css教學-PHP中文網

如何讓 jQuery 拖曳/調整大小與 CSS 變換比例一起使用？

Barbara Streisand

發布： 2024-10-26 20:18:03

原創

452 人瀏覽過

How to Make jQuery Drag/Resize Work with CSS Transform Scale?

jQuery Drag/Resize with CSS Transform Scale

這個問題集中在將jQuery 可拖曳和可調整大小插件應用於具有CSS 變換的div 中的子元素的問題（矩陣）應用於它。當拖曳子元素或調整其大小時，就會出現問題，因為 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 替代方案，這裡有一些需要考慮的選項：

Vanilla 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 變換比例一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！