使用draggable插件如何四周拖拽图片，将图片拖入指定位置

使用draggable插件可以实现图片的拖拽功能，但是要将图片拖入指定位置，需要在代码中添加相应的逻辑实现。

以下是一个简单的示例代码，可以实现将图片拖拽到指定区域后，图片位置固定不动。

HTML代码：

<div class="container">
  <div class="drag">
    <img src="https://picsum.photos/200/200" alt="draggable image">
  </div>
  <div class="drop"></div>
</div>

CSS代码：

.container {
  display: flex;
}

.drag {
  margin-right: 20px;
}

.drop {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

JS代码：

// 初始化draggable插件
draggable('.drag', {
  onDrag: function (event, element) {
    // 拖拽过程中，将图片的位置设置为absolute，以便在指定区域内拖拽
    element.style.position = 'absolute';
  },
  onDragEnd: function (event, element) {
    // 拖拽结束后，检测是否拖拽到了指定区域内
    var dropZone = document.querySelector('.drop');
    if (isOverlapping(element, dropZone)) {
      // 如果拖拽到了指定区域内，将图片的位置设置为固定，不可拖拽
      element.style.position = 'fixed';
      element.style.top = dropZone.offsetTop + 'px';
      element.style.left = dropZone.offsetLeft + 'px';
    } else {
      // 如果没有拖拽到指定区域内，将图片的位置设置为原来的相对位置
      element.style.position = 'relative';
    }
  }
});

// 检测两个元素是否重叠
function isOverlapping(element1, element2) {
  var rect1 = element1.getBoundingClientRect();
  var rect2 = element2.getBoundingClientRect();
  return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
}

在代码中，首先通过draggable插件初始化图片元素，当图片被拖拽时，将其位置设置为absolute，以便在指定区域内拖拽。当拖拽结束时，通过isOverlapping函数检测图片是否拖拽到了指定区域内，如果是，则将图片位置设置为固定，不可拖拽；如果不是，则将图片位置设置为原来的相对位置。