Question

我有一个可调整大小和可拖动的div，但我无法使其响应窗口，我给了20％但是如果我改变了窗口大小，即使我给了属性，位置也不会根据窗口改变在窗口的百分比中，我希望可拖动元素的位置和大小根据窗口百分比，在这个问题中任何人都可以帮助

$('div').resizable();
$('div').draggable({
  appendTo: 'body',
  start: function(event, ui) {
    isDraggingMedia = true;
  },
  stop: function(event, ui) {
    isDraggingMedia = false;
  }
});

<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div style="border:1px solid #00FF7F;position:absolute; display:inline-block; top:20%;left:20%;  width:26%; height:26% ; overflow:hidden;">
    <img style="  width:100%; height:100%" src="http://www.clipartkid.com/images/68/baby-toys-jpg-19-feb-2010-10-37-50k-FSIRmi-clipart.jpg" />
  </div>

</body>

</html>

Answer 1

如果不清楚自己想要完成什么，很难知道这对你有帮助。

工作示例：https://jsfiddle.net/Twisty/ch3fhs3o/

<强> HTML

<div class="diag">
  <img src="https://www.clipartkid.com/images/68/baby-toys-jpg-19-feb-2010-10-37-50k-FSIRmi-clipart.jpg" />
</div>

<强> CSS

.diag {
  border: 1px solid #00FF7F;
  position: absolute;
  display: inline-block;
  overflow: hidden;
}

.diag img {
  width: 100%;
  height: 100%;
}

<强>的JavaScript

$(function() {
  var isDraggingMedia;
  $(".diag").css({
    width: Math.round($(window).width() * 0.26) + "px",
    height: Math.round($(window).height() * 0.26) + "px",
    top: Math.round($(window).height() * 0.20) + "px",
    left: Math.round($(window).width() * 0.20) + "px"
  });
  $(".diag").resizable();
  $(".diag").draggable({
    appendTo: 'body',
    start: function(event, ui) {
      isDraggingMedia = true;
    },
    stop: function(event, ui) {
      isDraggingMedia = false;
    }
  });
  $(window).resize(function() {
    console.log("Window Width:", $(window).width(), "Height:", $(window).height());
    var dW = Math.round($(window).width() * 0.26);
    var dH = Math.round($(window).height() * 0.26);
    var dL = Math.round($(window).width() * 0.20);
    var dT = Math.round($(window).height() * 0.20);
    console.log("Dialog Width:", dW, "Height:", dH);
    $(".diag").css({
      width: dW + "px",
      height: dH + "px",
      top: dT + "px",
      left: dL + "px"
    }).trigger("resize");
  })
});

我更喜欢设置类名以使选择更容易。您可以看到，window调整大小后，它还会调整大小并重置可拖动的top, left。

这里有一些警告，但我不确定这是否是你要再找的东西。

创建一个响应页面的可拖动元素

1 个答案: