时间戳

首页 > 解决方案 > 将元素定位在可拖动图像的角落

javascript - 将元素定位在可拖动图像的角落

问题描述

这是我目前拥有的代码。当单击该图像时，我希望 4 个圆圈将自己定位在图像的四个角上。无论图像位于何处。

$("img").click(function() {

  

});
$( function() {
    $( "img" ).draggable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<br>
<i id="top-left" class="fa fa-circle-o"></i>
<i id="top-right" class="fa fa-circle-o"></i>
<i id="bottom-left" class="fa fa-circle-o"></i>
<i id="bottom-right" class="fa fa-circle-o"></i>

标签： javascriptjquery

解决方案

可能有很多方法可以做到这一点，正如约翰上面提到的，您可以将它们包装在单独的 div 中并使图标相对（这可以在用户创建图像时添加到您的 js 中，并且相当简单）。

另一种选择是您可以使用与上述相同的 div 包装方法，但使用 flex-box 显示，有问题的图像将有一个 div 包装，它将显示设置为“flex”，然后将属性设置为“ justify" 和 "align" 来设置每个图标的位置，具体取决于您希望它们放置的位置。这也是在用户通过您的 js 创建时实现的，并导致可扩展的反应式设计。

您也可以以类似的方式使用网格布局，但我认为 flex-box 更易于使用和理解。

这是了解它的绝佳资源。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读