使元素可拖动，需要添加 draggable 属性和 ondragstart 全局事件处理程序，如以下代码实例所示 - 在线编辑器

<script>
  function dragstart_handler(ev) {
    // 将目标元素的 id 添加到数据传输对象
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  window.addEventListener('DOMContentLoaded', () => {
    // 通过 id 获取元素
    const element = document.getElementById("p1");
    // 添加 ondragstart 事件监听器
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<p id="p1" draggable="true">该元素是可拖动的。</p>
​x
 
<script>
  function dragstart_handler(ev) {
    // 将目标元素的 id 添加到数据传输对象
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }
​
  window.addEventListener('DOMContentLoaded', () => {
    // 通过 id 获取元素
    const element = document.getElementById("p1");
    // 添加 ondragstart 事件监听器
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>
​
<p id="p1" draggable="true">该元素是可拖动的。</p>
​