<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>html5拖拽</title> ???<style> ???????.droptarget { ???????????width: 100px; ???????????height: 35px; ???????????margin: 15px; ???????????padding: 10px; ???????????border: 1px solid #aaaaaa; ???????} ???</style></head><body> ???<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> ???????<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">拖动我!</p> ???</div> ???<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> ???<p id="demo"></p> ???<script> ???????function dragStart(event) { ???????????event.dataTransfer.setData("Text", event.target.id); ???????} ???????function dragging(event) { ???????????document.getElementById("demo").innerHTML = " p 元素正在拖动"; ???????} ???????function allowDrop(event) { ???????????event.preventDefault(); ???????} ???????function drop(event) { ???????????event.preventDefault(); ???????????var data = event.dataTransfer.getData("Text"); ???????????event.target.appendChild(document.getElementById(data)); ???????????document.getElementById("demo").innerHTML = "p 元素已被拖动"; ???????} ???</script></body></html>html5拖拽
原文地址：https://www.cnblogs.com/heroljy/p/9936558.html