在窗口調整大小時保持 jquery ui 可拖動/可調整大小對象的相對屏幕大小

Question

我有一個網頁，其中有幾個 div 元素，這些元素可以通過 jquery ui 庫調整大小和拖動。

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

拖動和調整大小工作正常，但我希望 div 調整大小以在調整窗口大小時保持它們與窗口的相對大小。 例如，如果將 div 1 拖動到右上角並將其大小調整為屏幕寬度的 50%，有沒有辦法在窗口調整大小時保持該大小？ 我似乎無法在 jquery 或 jquery ui 中找到任何選項來允許我根據百分比強制元素的大小。 有沒有辦法用 jquery 做到這一點，或者我是否需要編寫在窗口調整大小時調用的代碼來處理這個問題？

Answer 1

我所做的是遵循這個問題的答案：

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

他們的建議是停止拖動事件，轉換為您想要保留的 % 位置，在上面的示例中，我轉換了左側和頂部。

    $('#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});