如何在div周围显示选择，如下图所示

Question

实现这一目标的一种方法是使用 在CSS中使用边框并使用八个方形div并将其放置在位置 （0,0），（0，w / 2），（0，w） （h / 2,0），（h，0） （h，w），（h / 2，w） 其中h = div的高度，w =形状的宽度

有没有比这更简单的方法？

Answer 1

您可以动态创建如下所示的HTML：

<div class='container'>
  <div class='my-image'></div>
  <div class='dragger top-left'></div>
  <div class='dragger top'></div>
  <div class='dragger top-right'></div>
  <div class='dragger bottom-right'></div>
  <div class='dragger bottom'></div>
  <div class='dragger bottom-left'></div>
  <div class='dragger left'></div>
</div>

然后添加一些CSS：

.container {  width: 80px; height: 80px; position: relative; display: block; }
.my-image { position: absolute; z-index: 5; top: 2; right: 2; bottom: 2; left: 2; border: 1px solid black; }
.dragger { position: absolute; width: 4px; height: 4px; border: 1px solid #333; background: white; }
.dragger.top-left { top: 0; left: 0; }
/* ... etc ... */

然后添加用于拖动的事件侦听器：

// If you are using jQuery...
$('.dragger').on('mousedown', function(){
  // ... do things
});

您可能希望使用Javascript动态创建这些容器，具体取决于您的应用程序。

在边框部分，您希望图像具有边框，并稍微填充它，以便框显示 over 边框：

.my-image { position: absolute; z-index: 5; top: 2; right: 2; bottom: 2; left: 2; border: 1px solid black; }