当浏览器调整大小时，不断在视频上移动可调整大小/可拖动的图像

Posted 2023-05-08

【中文标题】当浏览器调整大小时，不断在视频上移动可调整大小/可拖动的图像

【英文标题】：constantly move resizable/draggable image on the video when the browser is resize

【发布时间】：2019-03-23 15:30:09

【问题描述】：

我正在处理fiddle，我想在其中在调整浏览器大小时在视频上不断移动/调整图像（其本身是可调整大小/可拖动的图像）。

我用过的html/CSS/JS代码的sn-ps是：

HTML：

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

CSS：

.overlay 
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;

JS：

$(function() 
$('#wrapper').draggable();
$('#image').resizable(
start: function( event, ui ) 
   $('#overlay').show();
  ,

stop: function( event, ui ) 
   $('#overlay').hide();
  
  
);
);

问题陈述：

我想知道我应该在上面的 JS 代码中进行哪些更改，以便 每当我调整浏览器的大小时，可拖动/调整大小的图像也应该不断移动。

例如：假设我将 google 图像全屏放在一个人的鼻子上，如果我调整浏览器窗口的大小，google 图像似乎不会保留在鼻子上 如小提琴中所示https://jsfiddle.net/obn4yph0/embedded/result

【问题讨论】：

您可能会发现以下其中一项很有帮助：dragging items based on percentage to containment element 或 jQuery Draggable, convert position to percentage 或 Responsive jQuery UI with resizable / draggable elements。

@showdev 这些很有帮助，但我不确定如何在实际代码中实现。只是检查你是否收到我的问题。

@showdev 你在吗？

这个想法是使用相对于其容器的百分比值而不是像素值来定位元素。

@showdev 嗨，我想知道你是否可以在小提琴中解释一下，以便我能够可视化。谢谢。

【参考方案1】：

一个想法是通过相对于容器的百分比值来定位，而不是像素值。

这样定位将是响应式的，这意味着无论容器大小如何，相对于容器的位置都是相同的。

将像素转换为百分比的计算基于this answer by peteykun。 在 stop events 上执行计算以调整大小和拖动。

这是一个JSFiddle（因为 YouTube 嵌入在这里不起作用）。

function convert_to_percentage($el) 

  var $parent = $el.parent();

  $el.css(
    left: parseInt($el.position().left) / $parent.width() * 100 + "%",
    top: parseInt($el.position().top) / $parent.outerHeight() * 100 + "%",
    width: $el.width() / $parent.width() * 100 + "%",
    height: $el.height() / $parent.outerHeight() * 100 + "%"
  );



$(function() 

  var $wrapper = $('#wrapper');
  var $overlay = $('#overlay');

  convert_to_percentage($wrapper);

  $wrapper
    .draggable(
      stop: function(event, ui) 
        convert_to_percentage($wrapper);
      
    )
    .resizable(
      start: function(event, ui) 
        $overlay.show();
      ,
      stop: function(event, ui) 
        $overlay.hide();
        convert_to_percentage($wrapper);
      
    );
);

#wrapper 
  z-index: 100;
  position: absolute;


#wrapper img 
  width: 100%;
  height: 100%;


.embed-responsive 
  position: relative;


.overlay 
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  opacity: .5;
  display: none;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  <div class="overlay" id="overlay" />
</div>

<div id="wrapper" style="display:inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

【讨论】：

谢谢，它确实有效。这就是解决方案，我正在寻找。我在视频上创建了一个叠加层。它在事件开始时调整大小，在事件停止时隐藏。虽然我决定使用覆盖概念，但覆盖的父 div 类似乎没有结束标记。我在问你的意见 div 的结束标签应该在哪里。让我知道您的想法，因为 <div class="embed-responsive embed-responsive-16by9"> 或 <div class="overlay" id="overlay" />（其中之一）没有结束 div 标签。

你在吗？

只是检查你是否还在那里。

@john .overlay div 是自动关闭的，因此最后是 />（相对于 >）。由于它没有 textNode/children 并且从 CSS 中获取它的尺寸，这很好。

@john 对不起，我昨晚回家了。我基于您的 JSFiddle 的 HTML。抱歉，我不确定你在问什么。