如何让可拖动的元素在被拖放时停留在新的位置(HTML5而不是jQuery)？

在HTML5中，可以使用Drag and Drop API来实现让可拖动的元素在被拖放时停留在新的位置。下面是实现的步骤：

1. 首先，给需要拖动的元素添加draggable属性，设置为true，表示该元素可被拖动。

<div draggable="true">可拖动的元素</div>

1. 然后，为拖动元素添加dragstart事件监听器，该事件在开始拖动时触发。在事件处理函数中，可以设置拖动元素的数据传输类型和传输的数据。

<div draggable="true" ondragstart="dragStart(event)">可拖动的元素</div>

<script>
function dragStart(event) {
  // 设置传输的数据
  event.dataTransfer.setData("text/plain", event.target.id);
}
</script>

1. 接下来，为拖放目标元素添加dragover事件监听器，该事件在拖动元素在其上方拖动时触发。在事件处理函数中，需要调用event.preventDefault()来阻止默认的拖放行为。

<div ondragover="dragOver(event)">拖放目标</div>

<script>
function dragOver(event) {
  event.preventDefault();
}
</script>

1. 最后，为拖放目标元素添加drop事件监听器，该事件在拖动元素被释放时触发。在事件处理函数中，可以获取传输的数据并进行相应的处理。

<div ondrop="drop(event)">拖放目标</div>

<script>
function drop(event) {
  event.preventDefault();
  // 获取传输的数据
  var data = event.dataTransfer.getData("text/plain");
  // 根据数据进行相应的处理
  var element = document.getElementById(data);
  event.target.appendChild(element);
}
</script>

以上就是使用HTML5的Drag and Drop API实现让可拖动的元素在被拖放时停留在新的位置的方法。在实际应用中，可以根据具体需求进行相应的样式和逻辑的调整。

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

• 腾讯云云服务器（CVM）：提供灵活可扩展的云服务器实例，适用于各类应用场景。
• 腾讯云对象存储（COS）：提供安全可靠、高扩展性的云端存储服务，适用于存储和处理各类非结构化数据。
• 腾讯云云数据库 MySQL 版（CMYSQL）：提供高性能、可扩展的云数据库服务，适用于各类应用的数据存储和管理。
• 腾讯云人工智能开放平台（AI）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等，可应用于各行业的智能化需求。
• 腾讯云物联网开发平台（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等，适用于构建智能物联网应用。
• 腾讯云移动应用开发（MPS）：提供全面的移动应用开发服务，包括推送服务、短信验证码、移动统计等，助力开发者构建高质量的移动应用。
• 腾讯云区块链服务（BCS）：提供安全可信赖的区块链服务，包括区块链网络搭建、智能合约开发等，适用于各类区块链应用场景。
• 腾讯云视频处理（VOD）：提供高效、稳定的视频处理服务，包括转码、截图、水印等功能，适用于各类视频处理需求。

请注意，以上仅为腾讯云相关产品的示例，其他云计算品牌商也提供类似的产品和服务。