如何创建内容可编辑div中包含的div的鼠标选择？

Question

我有一个内容可编辑的div，用户可以在其中添加图片。我希望他能够在内容可编辑div中移动它们。如果我使用img标签没有问题，则用户可以轻松地选择图像并将其拖动。

我还有另一种类型的图像，它允许用户在其上键入文本。这是通过使用另一个将图像设置为背景的内容可编辑div来实现的。我希望用户也能够移动此div。我想如果用户可以选择整个div，他将能够对其进行拖动。如何实现呢？我无法使用鼠标选择div。参见屏幕截图：

蓝色圆圈是div /图片（用户可以在其中键入文本）；即使使用鼠标，我也无法选择它。 红色圆圈是控件（移动和删除）。当用户单击“移动”图标时，应用程序应选择div，然后希望用户可以将其拖动。

我没有运气就尝试了以下方法：

span.onclick = function() { selectTextPage(document.getElementById(id)) };

function selectTextPage(node) {

  let range = new Range();
  range.selectNode(node);

}

Answer 1

我要做的就是使user-select: all;添加到div css属性。