如何使 jQuery 拖动/调整大小与 CSS 变换比例一起使用？

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中文网其他相关文章！