1

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

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

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

4

1 回答 1

0

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

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});
于 2020-08-20T06:08:51.767 回答