HTML5拖放
拖放本地数据
 
1.HTML拖放
拖放（Drag 和 Drop）是HTML5标准的组成部分
2.拖放开始：
ondragStart:调用了一个函数，drag(event),它规定了被拖动的数据
3.设置拖动数据：
setDate():设置被拖动数据的数据类型和值
4.放入位置：
ondragover:事件规定在何处放置被拖动的数据
5.放置：
ondrop：当放置被拖数据时，或发生drop事件
 
html5实现本页面元素拖放
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>拖放本页面数据</title>

        <style>

            .box {

                width: 400px;

                height: 400px;

            }

            #box2 {

                float: left;

                background-color:black;

            }

            #box1 {

                float: left;

                background-color: #cccccc;

            }

        </style>

    </head>

    <body>

        <div id="box1" class="box"></div>

        <div id="box2" class="box"></div>

        <img id="img1" src="img/xk.png" width="100px" height="100px" />

        <div id="msg"></div>

        <script>

            var box1Div,box2Div, msgDiv, imgDiv1;

            window.onload = function() {

                box1Div = document.getElementById("box1");

                box2Div = document.getElementById("box2");

                msgDiv = document.getElementById("msg");

                imgDiv1 = document.getElementById("img1");

                /*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

                    showObj(e);

                }*/

                box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

                    e.preventDefault();

                }

                box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

                    e.preventDefault();

                }

                imgDiv1.ondragstart = function(e) { //当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

                    e.dataTransfer.setData("imgId", "img1");

                }

                box1Div.ondrop = dropImghandler; //被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

                box2Div.ondrop = dropImghandler;

            }

            function dropImghandler(e) {

                showObj(e.dataTransfer);

                e.preventDefault();

                //创建节点

                var img = document.getElementById(e.dataTransfer.getData("imgId"));

                e.target.appendChild(img);

            }

            function showObj(obj) {

                var s = "";

                for(var k in obj) {

                    s += k + ":" + obj[k] + "<br/>";

                }

                msgDiv.innerHTML = s;

            }

        </script>

    </body>

</html>

页面元素拖放效果：

html5实现本地文件拖放

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>拖放本地数据</title>

        <style>

            #imgContainer{

                background-color: #CCCCCC;

                width: 500px;

                height: 500px;

            }

        </style>

    </head>

    <body>

        <div id="imgContainer"></div>

        <div id="msg"></div>

        <script>

            var imgContainer;

            var msgDiv;

            window.onload = function(){

                imgContainer = document.getElementById("imgContainer");

                msgDiv = document.getElementById("msg");

                imgContainer.ondragover = function(e){

                    e.preventDefault();

                }

                imgContainer.ondrop = function(e){

                    e.preventDefault();

                    var fileObj = e.dataTransfer.files[0];

                    var fileReader = new FileReader();

                    fileReader.onload = function(e){

                        showObj(e.target);

                        imgContainer.innerHTML = "<img src='"+e.target.result+"' width='100px' height='100px' />"

                    }

                    fileReader.readAsDataURL(fileObj);

                }

            }

            function showObj(obj) {

                var s = "";

                for(var k in obj) {

                    s += k + ":" + obj[k] + "<br/>";

                }

                msgDiv.innerHTML = s;

            }

        </script>

    </body>

</html>

本地文件拖放效果：

html5实现本页面元素拖放和本地文件拖放的更多相关文章

  1. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  2. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  3. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  4. html5增强的页面元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 新增的页面 元素

    figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...

  6. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

  7. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  8. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  9. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

随机推荐

  1. mysql 数据操作 多表查询 子查询 带EXISTS关键字的子查询

    带EXISTS关键字的子查询 EXISTS关字键字表示存在. EXISTS 判断某个sql语句的有没有查到结果 有就返回真  true 否则返回假 False 如果条件成立 返回另外一条sql语句的返 ...

  2. SLAM FOR DUMMIES 第5-8章 中文翻译

    5,SLAM的处理过程 SLAM过程包括许多步骤,该过程的目标是使用环境更新机器人的位置.由于机器人的里程计通常是存在误差的,我们不能直接依赖于里程计.我们可以用激光扫描环境来校正机器人的位置,这是通 ...

  3. 【Lua】LDoc生成Lua文档工具的使用

    参考资料: http://my.oschina.net/wangxuanyihaha/blog/188909   LDoc介绍:     LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成 ...

  4. 6.MySQL必知必会之数据过滤-WHERE组合子句

    数据过滤-WHERE组合子句 本章讲授如何组合WHERE子句以建立功能更强的更高级的搜索条件. 我们还将学习如何使用NOT和IN操作符. 1.组合WHERE子句 上一章介绍的WHERE子句在过滤数据时 ...

  5. 牛客国庆集训派对Day3 Solution

    A    Knight 留坑. B    Tree 思路:两次树形DP,但是要考虑0没有逆元 可以用前缀后缀做 #include <bits/stdc++.h> using namespa ...

  6. centos6 pip install python-ldap报错

    error: Setup script exited with error: command 'gcc' failed with exit status 1 解决方法: 原因是版本不兼容,centos ...

  7. Mist 转移默认区块存储位置方法

    http://8btc.com/thread-35325-1-1.html 看了bunaifeiqq 发的帖子“Mist 转移区块存储位置方法”,综合帖子下面的发言,自己做了测试,可行.电脑系统win ...

  8. Object-C开发之instancetype和id关键字

    一.什么是instancetypeinstancetype是clang 3.5开始,clang提供的一个关键字,表示某个方法返回的未知类型的Objective-C对象.我们都知道未知类型的的对象可以用 ...

  9. php+mysql事务处理例子详细分析实例

    一.数据引擎innodb用begin,rollback,commit来实现提交事务处理,begin开始事务后出现错误就rollback事务回滚或者没有错误就commit提事务提交确认完成. start ...

  10. 20145122 《Java程序设计》第5周学习总结

    教材学习内容总结 1.在Java中,异常分为受检查的异常,与运行时异常. 两者都在异常类层次结构中. 2.受检查的异常(checked exceptions),其必须被 try{}catch语句块所捕 ...