drap api学习

自己应该用mousedown mouseup的方式写一遍比较一下代码量

研究的原始代码

<!DOCTYPE HTML>
<html>
<meta charset="utf8">
<head>
<script>
// dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
// darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
// dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
// dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
// dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
// drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
// dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。
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>
</head>
<body>
<style>
div{
    background:aqua;
    width:600px;
    height:400px;
}
    
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="http://www.gbtags.com/gb/networks/themes/img/geekcamp/fir.im.png" 
ondragstart="drag(event)">

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,257评论 1 23
  • 掌中一壶酒 难入喉 长夜悄更漏 又是一秋 落花飞盈袖 尺素间停留 勾勒一纸清秀 眉间一点愁 转朱楼 月在柳梢头 等...
    蔓草闲客阅读 206评论 0 1
  • 你是黑夜里绽放的清新, 脚下是深深的泥垢, 你却尘埃不沾。 淡淡清月, 落进半亩方塘, 你清秀如洗, 婷婷而立。 ...
    彧瑛阅读 406评论 0 1