ondragender事件又叫拖动事件。把一个图片拖动到另外一个元素上。
<style>
#div1,#div2{
border: 1px solid #aaa;
width: 80px;
height: 80px;
margin: 10px;
padding: 10px;
float: left;
}
</style>
</head>
<body>
<!-- div1内部放置可以拖动的图片 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- draggable属性表示可以被拖动，οndragstart="drag(event)触发拖动事件 -->
<img id="img" src="./h.jpg" alt="图片丢失" height="62px" draggable="true" ondragstart="drag(event)">
</div>
<!-- 图片可以被拖动到的div2 -->
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script>
// 允许被拖动函数
function allowDrop(ev){
ev.preventDefault();
}
// 设置拖动目标
function drag(ev){
ev.dataTransfer.setData('Text',ev.target.id);
}
function drop(ev){
ev.preventDefault();
// 获取拖动目标
var data = ev.dataTransfer.getData('Text');
// 将拖动目标追加到拖动目的地节点上
ev.target.appendChild(document.getElementById(data));
}
</script>
拖放事件生命周期：dragstart->drag->dragenter->dragover->drop->dragend
事件：
- dragstart：按下鼠标并开始移动鼠标，就会触发dragstart事件，我们通过ondragstart来调用方法
- drag：当dragstart开始，会持续触发drag事件，类似mousemove事件
- dragend：当拖放停止时（鼠标按键抬起时）会触发
- dragenter：拖动元素被拖动到放置元素上
- dragleave：拖动元素从放置元素上移除
- dragover：拖动元素在放置放置元素范围内移动
- drop：放置事件
数据交互： event.dataTransfer
方法：
- dataTransfer.setData(key,value);
- dataTransfer.getData(key)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
