如何显示拖动项的当前位置

显示拖动项的当前位置可以通过使用HTML5的Drag and Drop API来实现。以下是一个基本的示例：

首先，在HTML中创建一个可拖动的元素和一个用于显示当前位置的目标元素：

<div id="dragItem" draggable="true">拖动项</div>
<div id="dropTarget">当前位置：未拖动</div>

然后，在JavaScript中添加事件处理程序来处理拖动和放置操作：

var dragItem = document.getElementById("dragItem");
var dropTarget = document.getElementById("dropTarget");

dragItem.addEventListener("dragstart", function(event) {
  // 设置拖动的数据
  event.dataTransfer.setData("text/plain", "拖动项");
});

dropTarget.addEventListener("dragover", function(event) {
  // 阻止默认的放置行为
  event.preventDefault();
});

dropTarget.addEventListener("drop", function(event) {
  // 阻止默认的放置行为
  event.preventDefault();

  // 获取拖动的数据
  var data = event.dataTransfer.getData("text/plain");

  // 更新当前位置
  dropTarget.innerText = "当前位置：" + data;
});

在上面的代码中，我们首先通过dragstart事件设置拖动的数据。然后，在dragover事件中阻止默认的放置行为，以允许元素可以被放置。最后，在drop事件中获取拖动的数据，并更新目标元素的内容以显示当前位置。

这是一个简单的示例，你可以根据实际需求进行扩展和美化。如果你想了解更多关于HTML5的Drag and Drop API的信息，可以参考MDN文档。

腾讯云相关产品和产品介绍链接地址：