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. 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>

    1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...

  2. 【GoLang】golang 面向对象编程 & 面向接口编程

    005.面向对象&接口编程 1 面向函数编程 1.1 将数据作为参数传递到函数入参 1.2 对象与函数是分离的 2 面向对象编程 2.1 使用者看起来函数作为对象的属性而非参数 2.2 函数属 ...

  3. Node.js——Async

    一:流程控制 为了适应异步编程,减少回调的嵌套,我尝试了很多库.最终觉得还是async最靠谱. 地址:https://github.com/caolan/async Async的内容分为三部分: 流程 ...

  4. Interleaving Positive and Negative Numbers

    Given an array with positive and negative integers. Re-range it to interleaving with positive and ne ...

  5. fork详解

    [本文链接] http://www.cnblogs.com/hellogiser/p/fork.html [代码] 下面的代码输出多少个-?  C++ Code  123456789101112131 ...

  6. 一键自动发布ipa(更新svn，拷贝资源，压缩资源，加密图片资源，加密数据文件，加密lua脚本，编译代码，ipa签名，上传ftp)

    一键自动发布ipa(更新svn,拷贝资源,压缩资源,加密图片资源,加密数据文件,加密lua脚本,编译代码,ipa签名,上传ftp) 程序员的生活要一切自动化,更要幸福^_^. 转载请注明出处http: ...

  7. 6.js模式-中介者模式

    1. 中介者模式 所有对象通过中介者进行通信 var playDirector = (function(){ var players = []; var options = {}; options.a ...

  8. 5. javacript高级程序设计-引用类型

    1. 引用类型 1.1 Object类型 创建Object类型有两种方式: 使用new操作符后跟Object构造函数 var person =new Object(); 字符量表示法 var pers ...

  9. drupal记录（一）

    翻译包下载网址:locallize.drupal.org 中文模块 local 自动下载模块 L10n_update 第三方menu菜单 admin menu,menu bar 打开这个后要关闭系统自 ...

  10. HTML 基础

    1.HTML  超文本标记语言 2.网页分类: 动态网页   静态网页 ①静态网页与动态网页区别:  主要:动态网页与数据库链接,静态网页不与数据库连接: ②静态网页 修改展示图片 必须修改源代码 : ...