html5拖拽一

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/jquery.js"></script>

    <script>

        $(function () {

            var img =$("#img").get(0);

            var newDiv=$("#newDiv").get(0);

            img.addEventListener("dragstart",img_dragstart,false);

            newDiv.addEventListener("dragover",function(e){e.preventDefault();},false); // 默认行为阻止移动

            newDiv.addEventListener("drop",img_drop,false);

            /*

            * dragstart  拖拽开始

            * drag        过程

            * dragend       结束

            *

            * dragenter   进入目标元素

            * dragover    移动

            * drop        放置

            * dragleave   离开

            * */

            function img_dragstart(e){

                var imgsrc= e.target.src;

                //将地址保存进dataTransfer对象

                e.dataTransfer.setData("text",imgsrc);

                //设置鼠标图像

                e.dataTransfer.setDragImage(e.target,0,0); // 0 0 为鼠标跟图像的坐标距离

            }

            function img_drop(e){

                var src=e.dataTransfer.getData("text");

                var img = new Image();

                img.src=src;

                e.target.appendChild(img);

                //清空dataTransfer中的数据

                e.dataTransfer.clearData("text");

                e.preventDefault();

            }

        });

    </script>

</head>

<body>

    <div id="img" style="width:400px; height: 300px;border:1px solid red;">

        <img id="img2" src="horse.png">

    </div>

    <div id="newDiv" style="width: 400px; height:300px; border: 1px solid green;"></div>

</body>

</html>

html5 拖拽详细版

html

<!DOCTYPE html>

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  <title></title>

  <style>

    #srcDiv,#tarDiv{width:300px;height:500px;border:1px solid red;float:left;}

    #srcDivTip{width:300px;height:150px;border:1px solid red;clear:both;float:left;}

    #tarDivTip{width:300px;height:150px;border:1px solid red;float:left;}

  </style>

  <script src="drag_1.js"></script>

 </head>

 <body>

  <div id="srcDiv">

    <img id="img" src="img/bike.jpg"/>

  </div>

  <div id="tarDiv"></div>

  <div id="srcDivTip">

    <div id="d_start"></div>

    <div id="d_drag"></div>

    <div id="d_end"></div>

  </div>

  <div id="tarDivTip">

    <div id="d_enter"></div>

    <div id="d_over"></div>

    <div id="d_drop"></div>

    <div id="d_leave"></div>

  </div>

 </body>

</html>

js

function $(id){

    return document.getElementById(id);

}

function initial(){

    //为img绑定事件:

    //1、开始拖拽时:dragstart

    //2、拖拽过程中:drag

    //3、结束拖拽:dragend

    //为tarDiv绑定事件(目标元素)

    //1、第一次进入到目标元素:dragenter

    //2、在目标元素内移动:dragover

    //3、投放:drop

    //4、源元素移出目标元素:dragleave

    var img = $("img");

    var tarDiv=$("tarDiv");

    //绑定事件

    img.addEventListener("dragstart",img_dragstart,false);

    img.addEventListener("drag",img_drag,false);

    img.addEventListener("dragend",img_dragend,false);

    tarDiv.addEventListener("dragenter",tarDiv_dragenter,false);

    tarDiv.addEventListener("dragover",tarDiv_dragover,false);

    tarDiv.addEventListener("drop",tarDiv_drop,false);

    tarDiv.addEventListener("dragleave",tarDiv_dragleave,false);

}

function tarDiv_dragleave(e){

    $("d_leave").innerHTML="源元素已离开目标区域...";

    e.preventDefault();

}

function tarDiv_drop(e){

    $("d_drop").innerHTML="已经投放...";

    //创建指定图像

    /*var img = new Image();

    img.src="img/flower.png"

    e.target.appendChild(img);*/

    var src=e.dataTransfer.getData("text");

    var img = new Image();

    img.src=src;

    e.target.appendChild(img);

    //清空dataTransfer中的数据

    e.dataTransfer.clearData("text");

    e.preventDefault();

}

function tarDiv_dragover(e){

    var x=e.offsetX;

    var y=e.offsetY;

    $("d_over").innerHTML=x + ":" + y;

    e.preventDefault();

}

function tarDiv_dragenter(e){

    $("d_enter").innerHTML="已经进入到目标区域";

    e.preventDefault();

}

function img_dragstart(e){

    //阻止默认操作

    //e.preventDefault();

    $("d_start").innerHTML = "开始拖拽...";

    $("d_end").innerHTML = "";

    //获取图像路径

    var imgSrc = e.target.src;

    //将地址保存进dataTransfer对象

    e.dataTransfer.setData("text",imgSrc);

    //设置鼠标图像

    e.dataTransfer.setDragImage(e.target,0,0);

}

function img_drag(e){

    var x = e.pageX;

    var y = e.pageY;

    $("d_drag").innerHTML=x +":" + y;

}

function img_dragend(){

    $("d_end").innerHTML="源元素拖放结束";

    $("d_start").innerHTML = "已经结束了";

}

window.addEventListener("load",initial,false);

图片拖拽上传

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>图片拖拽上传</title>

    <style>

        #div1{ width:200px; height:200px; background:red; margin:100px;}

    </style>

    <script>

        window.onload = function(){

            var oDiv = document.getElementById('div1');

            var oUl = document.getElementById('ul1');

            oDiv.ondragenter = function(){

               this.innerHTML = '可以释放啦';

            };

            oDiv.ondragover = function(ev){

                ev.preventDefault();

            };

            oDiv.ondragleave = function(){

                this.innerHTML = '将文件拖拽到此区域';

            };

            oDiv.ondrop = function(ev){

                ev.preventDefault();

                var fs = ev.dataTransfer.files;

                  for(var i=0;i<fs.length;i++){

                    if(fs[i].type.indexOf('image')!=-1){

                        var fd = new FileReader();

                        fd.readAsDataURL( fs[i] );

                        fd.onload = function(){

                            var oLi = document.createElement('li');

                            var oImg = document.createElement('img');

                            oImg.src = this.result;

                            oLi.appendChild(oImg);

                            oUl.appendChild(oLi);

                        };

                    }

                    else{

                        alert('亲，请上传图片类型');

                    }

                }

            };

        };

    </script>

</head>

<body>

<div id="div1">将文件拖拽到此区域</div>

<ul id="ul1">

</ul>

</body>

</html>

html5拖拽的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  3. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  5. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  6. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  8. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

  9. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

  1. centos 6.5 git 服务器的配置（入门级）

    参考:https://www.digitalocean.com/community/tutorials/how-to-set-up-a-private-git-server-on-a-vps http ...

  2. Linux中增加软路由的两种方法/删除的方法

    第一种:   route add -net 172.16.6.0 netmask 255.255.255.0 gw 172.16.2.254 dev eth0   route del gw 172.1 ...

  3. 通过分析 JDK 源代码研究 TreeMap 红黑树算法实现

    本文转载自http://www.ibm.com/developerworks/cn/java/j-lo-tree/ 目录: TreeSet 和 TreeMap 的关系 TreeMap 的添加节点 Tr ...

  4. 【leetcode】Dungeon Game

    Dungeon Game The demons had captured the princess (P) and imprisoned her in the bottom-right corner ...

  5. java获取对象属性类型、属性名称、属性值

    /** * 根据属性名获取属性值 * */ private Object getFieldValueByName(String fieldName, Object o) { try { String ...

  6. 【小姿势】如何搭建ipa下载web服务器(直接在手机打开浏览器安装)

    前提: 1) 有个一个现成的web服务器,我用是nodejs. 2) 有个能在用你手机安装的ipa 3) 有个github账号 开搞: 1.用http://plist.iosdev.top/plist ...

  7. ios 在storyboard 和 xib中，显示自定义view的预览效果

    发现FSCalendar这个控件能在xib中显示预览效果,是怎么实现的呢?其中涉及的知识又有哪些? 主要就是IBInspectable 和 IB_DESIGNABLE 先看 IBInspectable ...

  8. ios 把已经点击过的UILocalNotification 从系统的通知中心现实中移除

    在ios7 上一个uilocalnotification在中心现实后,点击该消息,程序被唤醒了,但是该通知没有被移除.用了以下的代码后可以解决这个问题         UIApplication.sh ...

  9. VS2013，asp.net网站转换为web应用程序

    此功能已经不在右键菜单里了,而在主菜单中的“项目-->转换为WEB应用程序”

  10. Velocity 基本语法

    Velocity 基本语法 Velocity 是一个基于 Java 的模板引擎框架,提供的模板语言可以使用在 Java 中定义的对象和变量上.Velocity 是 Apache 基金会的项目,开发的目 ...