Question

我想要一个可以拖放的可编辑字段。这是我的代码（红色div是放置区域）：

function drag(ev) {
  let targetId = ev.target.id;
  let rect = document.getElementById(targetId).getBoundingClientRect();
  ev.dataTransfer.setData("targetId", targetId);
  let offsetX = ev.clientX - rect.left;
  let offsetY = ev.clientY - rect.top;
  ev.dataTransfer.setData("offsetX", offsetX);
  ev.dataTransfer.setData("offsetY", offsetY);
}

function drop(ev) {
  let targetId = ev.dataTransfer.getData("targetId");
  let offsetX = parseInt(ev.dataTransfer.getData("offsetX"));
  let offsetY = parseInt(ev.dataTransfer.getData("offsetY"));
  let dropX = ev.clientX - offsetX;
  let dropY = ev.clientY - offsetY;
  let el = document.getElementById(targetId);
  el.style.left = dropX + "px";
  el.style.top = dropY + "px";
  ev.preventDefault();
}

function allowDrop(ev) {
  ev.preventDefault();
}

.item {
  min-width: 25px;
  position: absolute;
  border: solid;
  background: white;
}

#item1 {
  padding: 3px;
}

#drop-zone {
  width: 300px;
  height: 200px;
  background: red;
  border: solid;
}

<div id="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>	
<span class="item" contenteditable="true" draggable="true" ondragstart="drag(event)">Item1</span>	
<br><br>
<div id="item1" class="item" draggable="true" ondragstart="drag(event)">
  <span contenteditable="true">Item2</span>
</div>

我做了2次测试。我的第一个测试是Item1，其中<span>本身是可拖动的。不幸的是，浏览器无法区分“放置光标”和“拖动元素”，因此Item1不可拖动。

然后，我的想法是在要单击该元素的字段周围有一个边框，因此我制作了Item2，将<span>放在包含<div>的位置。但是现在的问题是，由于div是可拖动的，因此范围也是可拖动的，但是我想将光标自由放置在范围中，当我单击范围以写一些文本时，光标始终在开头。我该怎么办？

注意：当我删除padding: 3px行时，Item2不起作用。

谢谢您的帮助。

可拖动的可编辑字段

0 个答案: