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. centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab ：启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课

    centos单用户 救援 运行级别  yum,单用户模式,救援模式,inittab :启动级别  e2fsck  wetty  mingetty  物理终端 /dev/console  虚拟终端 /d ...

  2. Web Services 平台元素SOAP、WSDL 、UDDI

    Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? SOAP 是一种使应用程序有能力通过 HTTP 交换信息的基于 XML 的简易协议.或者可以更简 ...

  3. C#使用Gzip解压缩完整读取网页内容

    using System; using System.Threading; using System.Text; using System.Text.RegularExpressions; using ...

  4. MonkeyScript使用教程

    原文地址https://www.cnblogs.com/yizhou-xu/p/8072813.html 原文地址https://www.cnblogs.com/YatHo/p/7205162.htm ...

  5. 程序员：统治世界or修复bug？

    程序员:统治世界or修复bug? 时至今日,我们依然生活在一个市场和技术受到高度崇拜的世界里,但是历史演化的规律提醒着我们:当一个东西开始成为社会崇拜的对象时,其中暗藏的不利因素将悄然的进行着.有人认 ...

  6. idea中使用Mybatis plugin

    一.安装. 1. 2. 二.使用. 1. 2.

  7. AtCoder Grand Contest 029 Solution

    A: Solved. 签. #include <bits/stdc++.h> using namespace std; #define ll long long #define N 200 ...

  8. Python 在字符串中处理html 和xml

    问题: 想将HTML 或者XML 实体如&entity; 或&#code; 替换为对应的文本.再者,你需要转换文本中特定的字符(比如<, >, 或&). 解决方案: ...

  9. TED #06# Questioning the universe

    Stephen Hawking: Questioning the universe 1. 第一段: There is nothing bigger or older than the universe ...

  10. g711u与g729比较编码格式

    •g711a—编解码格式为G.711 alaw •g711u—编解码格式为G.711 ulaw (the default) •g729—编解码格式为G.729 •g729a—编解码格式为G.729a ...