在调整窗口大小时保持 jQuery UI 可拖动/可调整大小对象的相对屏幕大小

maintaining relative screen size of jquery ui draggable/resizable object on window resize

本文关键字：可调整 对象 屏幕 相对 拖动 UI 小时 窗口 调整 jQuery      更新时间：2023-09-26

我有一个网页，其中包含几个div元素，这些元素可以通过jquery uUI库调整大小和拖动。 

$('#myDiv').draggable({ containment: "parent" }).resizable({ aspectRatio: true});

拖动和调整大小工作正常，但我希望div 在调整窗口大小时调整大小以保持它们与窗口的相对大小。 例如，如果将div 1 拖动到右上角并将其大小调整为屏幕宽度的 50%，有没有办法在窗口调整大小时保持该大小？ 我似乎在 jquery 或 jquery ui 中找不到任何选项来允许我根据百分比强制元素大小。 有没有办法用jquery做到这一点，或者我是否需要编写在窗口调整大小时调用的代码来处理这个问题？

我所做的是遵循这个问题的答案：

stackoverflow.com/questions/37328053/draggable-object-goes-outside-the-container-when-the-window-is-resized

他们的建议是在停止拖动事件时，转换为您想要保留的%位置，在上面的exeamp中，我转换了左侧和顶部。

    $('#myDiv').draggable({containment: "parent",  
        stop: function(e, ui) { 
              var percLeft = ui.position.left/ui.helper.parent().width()*100;
              var percTop = ui.position.top/ui.helper.parent().height()*100;
              ui.helper.css('left', percLeft + '%');      
              ui.helper.css('top', percTop + '%');    
              }
       }).resizable({ aspectRatio: true});
相关文章：