1，首先，你要告诉计算机那个元素可以拖动，或者是一张图，或者是一个盒子，在标签里面加上 draggable="true" 

2，然后，监听该元素被拖动的函数 ondragstart="drag(event)"

3，drag 里面告诉计算机是那个元素被拖动的 ev.dataTransfer.setData("Text",ev.target.id);

4，接下来将拖动的元素放到哪个盒子，（或者是经过那个盒子，经过某个盒子的时候触法 ondragover 函数 ）当然了，这个盒子要告诉计算机，我是个盒子，可以把东西放我这里   ev.preventDefault(); 这句的意思就是说计算机别限制我“禁止”拖动

5，当鼠标松开的时候 触发事件 ondrop="drop(event)" ， 这个函数里面 介绍是谁被拖动的ev.dataTransfer.getData("Text");，放到了哪里ev.target ，就把被拖动的元素插入这个盒子里面，ev.target.appendChild(document.getElementById(data));   效果就实现了。

6，这个是我自己的理解，有不对的欢迎指正。

下面，是简单的源码

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;}

#div2 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev){

    ev.preventDefault();

    }

function drag(ev){

    ev.dataTransfer.setData("Text",ev.target.id);

    }

function drop(ev){

    ev.preventDefault();

    var data = ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

</script>

<meta charset="utf-8">

</head>

<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<img id="drag2" src="data:images/001(2)_01.jpg" draggable="true" ondragstart="drag(event)"  width="460" height="221" />

</body>

</html>

上面这个是基本的这种功能，其实拖放有很强大的功能，本吊也仅仅知道其中的一小部分，下面贴一个稍微复杂点的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style>

*{ margin:0; padding:0}

.mask { position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,.4); top:0px; left:0px;}

.mask_footer { width:300px; height:220px; position:relative; left:50%; top:50%; background-color:#fff; border:solid 1px  #ccc ; margin-left:-150px; margin-top:-100px;}

.title {

    background-color: #960;

    color: #fff;

    height:30px; line-height:30px;

    cursor:move;

}

.close { width:20px; height:20px; font-size:18px; position:absolute; right:5px; top:5px; cursor:pointer;}

.close:hover { color:#fff;}

#but { width:200px; height:40px;}

</style>

</head>

<body>

<button type="button" value="test" id="but" >test</button>

<div class="mask" ondrop="drop(event)" ondragover="allowDrop(event)">

  <div class="mask_footer" id="testid" >

          <span class="close">×</span>

        <h3 class="title" draggable="true" draggable="true"  ondragstart="drag(event)" >点击我可以移动位置</h3>

        <div>文本内容》。。。、</div>

  </div>

</div>

<script>

var but =document.getElementById("but");

var mask = document.getElementsByClassName("mask")[0];

var clos = document.getElementsByClassName("close")[0];

but.addEventListener("click",show);

clos.addEventListener("click",hide);

var nowx , nowy ;

function show(){

    mask.style.display = "block ";

}

function hide (){

    mask.style.display = "none";    

    }

function allowDrop(ev){

    ev.preventDefault();

    }

function drag(ev){

    var dragId = ev.target.parentNode.id;

    var dragImg = document.getElementById(dragId);

    ev.target.offsetX;

    var yuanX =  ev.target.parentNode.offsetLeft ;

    var yuanY =  ev.target.parentNode.offsetTop ;

    nowx =ev.clientX ;

    nowy =ev.clientY ;

    nowx = nowx - yuanX ;

    nowy = nowy - yuanY;

    ev.dataTransfer.setData("Text",dragId);

    ev.dataTransfer.setDragImage(dragImg,nowx,nowy);

    }

function drop(ev){

    ev.preventDefault();

    var data = ev.dataTransfer.getData("Text");

    var dX = ev.clientX -nowx;

    var dY = ev.clientY -nowy ;

    var ele = document.getElementById(data);

    ele.style.left = dX +"px";

    ele.style.top = dY +"px";

    ele.style.marginLeft=  "0px";

    ele.style.marginTop = "0px";

}

</script>

</body>

</html>

这个是模仿百度登陆框做的一个功能，当然了，也很普通。

html5 拖拽的简要介绍的更多相关文章

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

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

  2. Html5拖拽复制

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

  3. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

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

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

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

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

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

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

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

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

  8. html5拖拽总结

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

  9. HTML5拖拽实例

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

随机推荐

  1. Hadoop-Map/Reduce之单表连接的实现

    MapReduce程序就是根据其特性对数据进行一个简单的逻辑处理,其中最为重要的一个特性就是根据key值将value值进行合并,其次就是在shuffle阶段有排序. 遇到一个MR程序就是要巧妙利用合并 ...

  2. Jsp_demo:自定义标签

    Jsp自定义标签: 1.继承SimpleTagSupport,重写doTag(). 2.在WEB-INF/ 下配置**.tld文件 3.Jsp页面引入自定义标签:<%@ taglib uri=& ...

  3. HDU 4722 Good Numbers

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4722 Good Numbers Time Limit: 2000/1000 MS (Java/Othe ...

  4. Oracle数据库sys和system用户的默认密码及如何修改密码

    新安装好的Oracle数据库sys用户默认密码为change_on_install,system用户默认密码为manager. 以管理员身份登录的话,在命令行中输入 sqlplus sys/chang ...

  5. Java学习——数据类型【2】

    1. 对象与类 对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象的行状态和行为. 2. 类可以包含的变量 类型 局部变量 成员变量 类变量(静态变量) 定义位置 方法.或语句块中 类中, ...

  6. Java Web学习笔记-Servlet不是线程安全的

    由于Servlet只会有一个实例,多个用户同时请求同一个Servlet时,Tomcat会派生出多条线程执行Servlet的代码,因此Servlet有线程不安全的隐患.如果设计不当,系统就会出现问题. ...

  7. 关于css命名规范

    1 newsHeader-logo,第一个单词小写,第二个单词大写,第三个单词加-

  8. Android 开发60条技术经验总结(转)

    Android 开发60条技术经验总结: 1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2. ...

  9. jetty之嵌入式运行jetty

    在文章什么是jetty中,提到jetty容器真正出名的地方是可以作为一个嵌入到java代码的servlet容器,即可以在java代码中实例化servlet对象并操作该对象.下面我们就先来学习 下如何把 ...

  10. 非常棒的jqChart图表插件

    由于项目需要,做一些类似于OA系统的应用时,表格用到的是最多的,那么图表展示就先显得尤为的重要,其中柱柱状图.折线图.饼状图又居多. 之前一直使用的是Chrome下的googleAPI中提供的char ...