<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 200px;

            height: 80px;

        }

        #fir{background-color: blue; }

        #sec{background-color: black;}

        #thr{background-color: chartreuse;}

        #d_img{width: 200px;height: 80px;}

    </style>

    <script type="text/javascript">

        var cont=;

        var in_moving=;

        /**--01--*/

        function f_ondragstart(e){

            document.getElementById("sp_start").innerHTML= e.target.id+":被拖元素，开始被拖动";

            //被拖动，就将拖动的元素，存入（setData）dataTransfer里面：键值对

            e.dataTransfer.setData("who", e.target.id);

            //--04--设置拖放过程中允许的效果（ondragstart中设置）

            e.effectAllowed="all";

        }

        function f_ondrag(e){

            cont++;

            document.getElementById("sp_moving").innerHTML= e.target.id+":被拖元素，被拖动过程中:"+cont;

        }

        function f_ondragenter(e){

            document.getElementById("sp_in").innerHTML= "进入:"+e.target.id;

        }

        /**--02--*/

        function f_ondragover(e){

            //进入，就设置可以拖放进来（设置不执行默认：【默认的是不可以拖动进来】）

            e.preventDefault();

            //--05--设置具体效果

            e.dataTransfer.dropEffect="copy";

            document.getElementById("sp_in_moving").innerHTML="进入:"+ e.target.id+":"+in_moving;

        }

        function f_ondragleave(e){

            document.getElementById("sp_leave").innerHTML="离开:"+ e.target.id

        }

        /**--03--*/

        function f_ondrop(e){

//            document.getElementById("sp_on").innerHTML="到达目标:"+ e.target.id;/**/

            //设置不执行默认：【默认的是不可以拖动进来】

            e.preventDefault();

            var who= e.dataTransfer.getData("who");

            //添加子节点

            document.getElementById(e.target.id).appendChild(document.getElementById(who));

            document.getElementById("sp_on").innerHTML=who+":到达目标:"+ e.target.id;

        }

        function f_ondragend(e){

            document.getElementById("sp_end").innerHTML="结束拖放:"+ e.target.id;

        }

    </script>

</head>

<body>

<!--拖放：

    拖动的对象，需要设置draggable属性为true(draggable="true"),

    a元素需要href，img元素需要src。

    、被拖对象：dragstart事件，被拖动的元素，开始拖放触发

    、被拖对象：drag事件，被拖放的元素，拖放过程中

    、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）

    、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)

    、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围

    、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中

    、被拖对象：dragend事件，拖放的对象元素，拖放操作结束

 -->

</body>

<div id="fir" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">

</div>

<div id="sec" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">

</div>

<div id="thr" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">

</div>

<br>

<img id="d_img" src="imgs/img.jpg" draggable="true" ondragstart="f_ondragstart(event)" ondrag="f_ondrag(event)" ondragend="f_ondragend(event)">

<br>

<span id="sp_start"></span>

<br>

<span id="sp_moving"></span>

<br>

<span id="sp_in"></span>

<br>

<span id="sp_in_moving"></span>

<br>

<span id="sp_leave"></span>

<br>

<span id="sp_on"></span>

<br>

<span id="sp_end"></span>

</html>

HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性的更多相关文章

  1. dragstart drag dragend dragenter dragover dragleave drop

    dragstart drag dragend dragenter dragover dragleave drop   前端框架层出不穷,网页上的效果越来越绚丽,制作绚丽的效果的成本越来越低,其中有种拖 ...

  2. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  3. HTML5拖拽/拖放(drag & drop)详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

  4. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  5. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  6. HTML5拖拽功能drag

    1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...

  7. 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例

    上一次学习了html5的drag和drop方法,传送门  就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...

  8. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

  9. HTML5（四）Drag and Drop

    HTML5 拖放(Drag 和 Drop) 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素 ...

随机推荐

  1. 【Unity3d游戏开发】UGUI插件入门之游戏菜单

    ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用.本篇博客会介绍如何使用ugui制作一个游戏菜单,并且了解如何让物体与ugui ...

  2. easyui datalist按组多选

    结果如下: 数据样式如下: [ {"text":"Epson WorkForce 845","group":"Printer&qu ...

  3. iscrolljs 看API 回顾以前开发中失误

    今天有空 细致的看看iscrolljs api 发现自己以前的几个失误是没看api造成的 失误1 页面a操作 影响了页面b的滚动条 api 解释: options.bindToWrapper The ...

  4. js获取?后面具体参数的值

    function getURLParam(name) {         return decodeURIComponent((new RegExp('[?|&]' + name + '=' ...

  5. 酷炫放大镜canvas实现

    主要采用了canvas内渲染canvas的技术,还有利用比例来放大图片 比例:放大镜宽度/画布宽度=原图宽度/渲染图宽度 <!DOCTYPE html><html lang=&quo ...

  6. word2013删除下载的模板

    word2013删除下载的模板 删除步骤: 1)关闭相关的word文档. 2)按照以下的路径找到相应的位置:"%系统根目录%\Users\Administrator\AppData\Roam ...

  7. ZeroMQ接口函数之 ：zmq_z85_decode – 从一个用Z85算法生成的文本中解析出二进制密码

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_z85_decode zmq_z85_decode(3)         ØMQ Manual - ØMQ/4.1 ...

  8. PHP的流程控制结构

    1.break 使用break语句可以将深埋在嵌套循环中的语句退出到指定层数或直接退出到最外层,break是接受一个可选的数字参数来决定跳出几重语句.break可以跳出几重语句.break可以跳出几重 ...

  9. Windows 7无法卸载及安装IE11的解决方法

    1. 清空 C:\Windows\TEMP\  中的所有内容 2. 以管理员身份运行命令行,在命令中行输入下面的代码: FORFILES /P %WINDIR%\servicing\Packages ...

  10. 你听说过哪些坑人 or 赚钱的歪点子？真是骗局太多，傻子都不够用啊！

    又到了骗术揭秘时间了.各位看客您扶稳做好了,来给你深扒一些行业内幕了. 或者说一些投机的思路. 先提前写一些字,相信你们一会评论时候会用的上.直接复制,比较省力. “这年头傻逼太多,骗子明显不够用啊. ...