调整浏览器大小时，不断在视频上移动 resizable/draggable 个图像

Question

我正在处理 fiddle，我想在浏览器打开时 不断 move/resize 图像（它本身就是 resizable/draggable 图像）调整大小。

我使用的 HTML/CSS/JS 代码片段是：

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 代码中进行哪些更改，以便 每当我调整浏览器大小时，draggable/resizable 图像也应该不断移动。

例如：假设我将 google 图像全屏显示在一个人的鼻子上 并且如果我调整浏览器大小 window ，google 图像似乎没有停留在鼻子上方 ，如 fiddle https://jsfiddle.net/obn4yph0/embedded/result

中所示

Answer 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>

调整浏览器大小时，不断在视频上移动 resizable/draggable 个图像

constantly move resizable/draggable image on the video when the browser is resize

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable