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});

在窗口调整大小时保持jquery ui draggable / resizable对象的相对屏幕大小

1 个答案: