<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title><script>function allowDrop(ev){//ondragover 事件规定在何处放置被拖动的数据, 拖进div移动行为 ev.preventDefault();//元素的默认事件阻止}function drag(ev)//拖动行为{ ev.dataTransfer.setData("Text",ev.target.id);//setData是将指定格式的数据赋值给dataTransfer,ev.target指传入对象}function drop(ev)//数据放出行为{ ev.preventDefault();//元素的默认事件阻止处理 var data=ev.dataTransfer.getData("Text");//getData是从dataTransfer或者clipboardData中获取值 ev.target.appendChild(document.getElementById(data));//appendChild是追加,data数据} </script></head><body>
<div id="div1" οndragstart="drag(event)" draggable="true" style="width:200px; height:150px; background:red;"></div><!--draggable="true"设置为可以拖动,ondragstart在拖动操作开端运行的脚本。--><div id="div2" οndrοp="drop(event);" οndragοver="allowDrop(event);" style=" width:100%; height:600px; border:1px solid #ffff00;"></div></body></html>