-
实现拖拽效果
源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 -
目前实现拖拽效果
使用原生DOM就能实现 - 最麻烦 使用jQuery的插件 HTML5种提供的拖拽功能 -
HTML5拖拽
1）源元素事件 dragStart - 当鼠标开始拖放时被触发 drag - 当鼠标拖放过程中被触发 dragend 当鼠标拖放结束时被触发 2）目标元素事件 dragover - 当鼠标到达目标元素被触发，会反复触发 dragenter - 当鼠标拖放进入到目标元素内触发 drop - 当鼠标实现拖放效果时被触发 问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为 解决：在dragover的事件中组织默认行为即可event.preventDefault(); dragleave - 当鼠标离开目标元素时触发 3）dataTransfer对象 作用：类似于window系统的剪切板功能 功能：可以将源元素的信息，存储在这里，提供给目标元素 使用： 使用事件对象获取到dataTransfer对象 var trans = event.dataTransfer; 设置数据 setData(type,data)方法 type:类型，特指标识(id)，一般为字符串 data:设置的数据内容 获取数据 getData(type); 清除数据 clearData(type) 所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除 事件对象 - 作为事件处理函数的参数存在 DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准 4）从本地拖拽文件到页面中 var transfer = event.dataTransfer; //找到拖拽的文件 var file = transfer.files[0]; //新建文件读取对象 var reader = new FileReader(); //读取文件 reader.readAsDataURL(file); //读取完以后加载 reader.onload = function(){ d1.innerHTML = "<img src"+reader.result+">"; }
HTML5实现拖拽
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Range对象的方法 Range对象之cloneRange、cloneContents、extractConten...
- W3C中关于H5拖拽(拖放)的介绍 拖放（Drag 和 drop）是 HTML5 标准的组成部分拖放是一种常见的特...
