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. 全部springxml文件约束 applicationContext.xml

    <?xml version="1.0" encoding="utf-8"?> <beans xmlns="http://www.sp ...

  2. 4.5---判断是否是二叉排序树BST（CC150）

    public boolean checkBST(TreeNode root) { return isBST(root, Long.MIN_VALUE, Long.MAX_VALUE); } publi ...

  3. 修改apache上传文件大小限制

    PHP上传文件大小限制解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M    post_max_size = 10M    memory_limi ...

  4. keepalived和heartbeat区别

    <1>Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP):Heartbeat是基于主机或网 ...

  5. adb 服务端口2037被占，导致adb和appium无法工作

    症状1: 命令行运行 adb 相关命令,提示如下: adb server is out of date. killing...ADB server didn't ACK* failed to star ...

  6. Python中下划线的使用方法

    本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯例而已. 单下划线(_) 通常情况下,会在以下3种场景中使用 ...

  7. android studio Error:java.lang.OutOfMemoryError: GC overhead limit exceeded

    android studio Error:java.lang.OutOfMemoryError: GC overhead limit exceeded 在app下的build.gradle中找到and ...

  8. c++ 调用外部程序exe-ShellExecuteEx

    此方法最实用的调用exe. #include <ShellAPI.h> string file_path = s_run_dir+"\\ConsoleApplication1.e ...

  9. 警告: 程序集绑定日志记录被关闭(IIS7 64位系统)

    部署一个.NET程序在IIS7服务器,出现如下信息: 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: S ...

  10. [转]安装和使用JD-Eclipse插件

    JD-Core 是一个免费的库,从一个或多个“.class”文件中 重构Java源代码.JD-Core可以用来恢复丢失的源代码,并深究Java运行时类库.支持Java 5的功能:如注释,泛型或键入“枚 ...