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. nodejs通过代理(proxy)发送http请求(request)

    有可能有这样的需求,需要node作为web服务器通过另外一台http/https代理服务器发http或者https请求,废话不多说直接上代码大家都懂的: var http = require('htt ...

  2. Flask系列(四)Flask实现简单页面登陆

    from flask import Flask,render_template,request,redirect,session app = Flask(__name__,template_folde ...

  3. 【Cocos2dx3.x Lua】图片异步加载

    一.说明     异步加载就是把消耗程序时间比较大的加载操作放到其他线程中,待加载完毕后通过回调函数的方式通知主线程.   addImageAsync函数实现(Cocos2dx 3.3) Link:  ...

  4. CSV文件读取类

    最近项目中,经常需要读取Csv文件.基本步骤是: (1)按行读取 (2)然后将一行数据按逗号,分割为字符串数组 (3)将各列字符串转换成相应类型的数据 ,如int double类型 写了一个简单的Cs ...

  5. cocos代码研究（23）Widget子类ScrollView学习笔记

    基础理论 一个能够被用户触摸滚动的一个层次型布局容器视图,允许其尺寸大于屏幕显示的物理尺寸,其内部维护有一个布局用于水平的或垂直的存放子节点.继承自 Layout,被 ListView 继承. 代码实 ...

  6. MyBatis—mapper.xml映射配置

    SQL文件映射(mapper文件),几个顶级元素的配置: mapper元素:根节点只有一个属性namespace(命名空间)作用: 1:用于区分不同的mapper,全局唯一. 2:绑定DAO接口,即面 ...

  7. Codeforces Round #530 (Div. 2) Solution

    A. Snowball 签. #include <bits/stdc++.h> using namespace std; ], d[]; int main() { while (scanf ...

  8. 2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) Solution

    A - Odd Palindrome 水. #include <bits/stdc++.h> using namespace std; #define N 110 char s[N]; i ...

  9. Python3.6（windows系统）解决编码问题

    Python3.6(windows系统)解决编码问题 1,py文件代码: import urllib.request url = "http://www.douban.com/" ...

  10. 第二章 第二个spring-boot程序

    上一节的代码是spring-boot的入门程序,也是官方文档上的一个程序.这一节会引入spring-boot官方文档推荐的方式来开发代码,并引入我们在spring开发中service层等的调用. 1. ...