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. android 百度地图 No implementation found for int

    java.lang.UnsatisfiedLinkError: No implementation found for int com.baidu.platform.comjni.map.common ...

  2. CSLA.Net学习（2）

    采用CSLA.net 2.1.4.0版本的书写方式: using System; using System.ComponentModel; using Csla.Validation; using S ...

  3. docker——安全防护与配置

    Docker是基于Linux操作系统实现的应用虚拟化.运行在容器内的进程,跟运行在本地系统的进程本质上并无区别,配置不合适的安全策略将可能给本地系统带来安全风险,因此,Docker的安全性在生产环境中 ...

  4. 安装完C++builder6.0启动的时候总是出现无法将'C:\Program Files\Borland\CBuilder6\Bin\bcb.$$$'重命名为bcb.dro

    :兼容性问题  运行前右键属性“兼容性”-尝试不同的兼容性.比如“windows 8”

  5. nmon监控Linux服务器系统资源

    本文转自:http://www.cnblogs.com/hyzhou/archive/2011/12/29/2305860.html 在实际的测试过程中,Loadrunner监控Linux系统资源不太 ...

  6. Java中使用OpenSSL生成的RSA公私钥进行数据加解密

    当前使用的是Linux系统,已经按装使用OpenSSL软件包, 一.使用OpenSSL来生成私钥和公钥 1.执行命令openssl version -a 验证机器上已经安装openssl 1 open ...

  7. 用opencv检测人眼并定位瞳孔位置

    最近的研究要用到定位瞳孔的位置,所以上网搜了下相关的代码.总结如下: 1) 定位瞳孔可以直接使用opencv中的自带的分类器(haarcascade_eye_tree_eyeglasses.xml)来 ...

  8. selenium+java破解滑动验证码

    2019-04-16更新 修复极验页面改版,这次采用极验官方的demo地址:https://www.geetest.com/demo/slide-bind.html 截止2019-04-16,极验和腾 ...

  9. Hadoop运维手记

    1.处理hadoop的namenode宕机 处理措施:进入hadoop的bin目录,重启namenode服务 操作命令:cd path/to/hadoop/bin ./hadoop-daemon.sh ...

  10. IntelliJ IDEA 中配置lombok插件，编写简略风格Java代码

    1.打开IDEA的Settings面板,并选择Plugins选项,然后点击 “Browse repositories..” 2.开启注释处理 3.在pom.xml中添加lombox <!-- h ...