H5中， 有个属性，draggable="true"， 这个属性呢(默认false)，需要加在标签上，加上去该标签就可以拖动了， 看下gif图吧

默认的标签，是不能拖动的，但是有两个标签是意外，img标签，和 a标签，默认就可以拖动。

浏览器兼容问题： w3c 是说 都支持， 但是据我实测， firefox 浏览器，在我这台机子上面是不支持的。 所以，使用的时候，注意一下，firefox 这个特殊的浏览器

好了，接下来，看看他还有些什么东西吧。拖拽div的时候，他身上能监听到三个事件 ↓

<script>

    var div = document.getElementsByTagName('div')[0];

    div.ondragstart = function(e){   //开始拖拽事件

        console.log('start');

    }

    div.ondrag = function(e){        //拖拽过程中的事件

        console.log('drag');

    }

    div.ondragend = function(e){     //结束拖拽事件

        console.log('end');

    }

</script>

如果有仔细看的朋友，就会观察到， dragstart事件，并不是在点击的时候触发的，是点击之后，开始移动的时候触发的，还有，drag事件呢， 只要在触发了 dragstart 事件后，移动了，那么，他就会不停的触发，即使你已经停止移动了，还是会触发，直到你放下鼠标按键，触发了 dragend事件后，才停止。

简单可以理解为，drag 事件呢， 就是在移动的过程中会一直触发。

那么。做一个简单的拖拽小demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;

            left: 0px;

            top: 0px;

        }

    </style>

</head>

<body>

    <div draggable="true"></div>

    <script>

        var div = document.getElementsByTagName('div')[0];

        var X = 0,

            Y = 0;

        div.ondragstart = function(e){

            X = e.clientX;  //记录鼠标点下的位置。(因为div的定位点，是左上角 0，0)

            Y = e.clientY;

        }

        div.ondragend = function(e){

            var X1 = e.clientX - X; //结束的位置，减去鼠标点下的位置，那么得到的位置，就是div落下的位置。

            var Y1 = e.clientY - Y;

            div.style.left = div.offsetLeft + X1 + 'px'; //这里还需要加上 div当前的位置， 累加。

            div.style.top = div.offsetTop + Y1 + 'px';

        }

    </script>

</body>

</html>

你以为这样就结束了吗？

还有四个事件，分别是  ondragenter,  ondragover,  ondragleave,  ondrop,   这四个事件呢，是绑定到，你要把拖拽的东西，放到那里去。 举个例子，我要拿一个杯子，那么我要把这个杯子放到哪里去呢？  是不是得有个东西，给他放？   那么这四个事件，就是绑定在，给他放的标签上。  看gif 图吧

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div:nth-of-type(1){

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box{

            position: absolute;

            left: 200px;

            top: 200px;

            width: 200px;

            height: 200px;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <div draggable="true"></div>

    <div class="box"></div>

    <script>

        var box = document.getElementsByClassName('box')[0];

        box.ondragenter = function(){

            console.log('enter');      // 跟 dragstart 事件一样， 只不过，是进入到该标签内才会触发(不是东西进入就触发，还得是鼠标进去)。

        }

        box.ondragover = function(){   // 跟 drag 事件一样， 只不过，是进入到该标签内才会触发。

            console.log('over');

        }

        box.ondragleave = function(){  // 是进入到该标签内,在离开该标签才会触发。(鼠标抬起，物体会回到原来的位置上，此时也会触发leave事件，因为已经离开了)

            console.log('leave');

        }

        box.ondrop = function(){

            console.log('drop');    // 跟 dragend 事件一样， 只不过，是进入到该标签内,在该标签内放置标签才会触发。在该标签外面放置是不会触发的
        }

    </script>

</body>

</html>

看完上面gif图的 有没有发现， 前三个事件都触发了， 为啥第四个事件，drop 不会触发呢？ 为什么在黑框里面放置红方块不会触发，在外面放置也不会触发？

这是因为，无论你在哪里放置 这个红方块。 都是不允许的，在外面放(body)，里面放(box)，需要添加一个阻止默认事件才可以。在ondragover 里面添加即可

box.ondragover = function(e){

      e.preventDefault();

}

接下来，做一个小demo， 拖拽，放置到框框里面,上效果图

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 200px;

            height: 50px;

            background-color: #0ff;

            margin-top: 10px;

        }

        .wra {

            position: absolute;

            left: 300px;

            top: 0;

            width: 200px;

            height: auto;

            border: 1px solid black;

        }

        .wra:nth-of-type(1){

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

    <div class="wra" >

        <div class="box" draggable="true">1</div>

        <div class="box" draggable="true">2</div>

        <div class="box" draggable="true">3</div>

    </div>

    <div class="wra"></div>

    <script>

        var wra = document.getElementsByClassName('wra')[1];

        var box = document.getElementsByClassName('box');

        var dom = null;

        for (var i = 0; i < box.length; i++) { //给每个块 添加开始拖拽的事件。

            box[i].ondragstart = function () {

                dom = this;                    //谁触发了这个事件，就把它添加到 dom变量上。

            }

        }

        wra.ondragover = function (e) {

            e.preventDefault();

        }

        wra.ondrop = function () {

            this.appendChild(dom);            // 在触发放置事件后，把dom变量上面存dom元素，添加到 wra里面去。

        }

    </script>

</body>

</html>

本章结束，感谢你的阅读。

H5系列之drag拖放的更多相关文章

  1. H5系列之History（必知必会）

    H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时 ...

  2. Silverlight & Blend动画设计系列八：拖放(Drag-Drop)操作与拖放行为(DragBehavior)

    在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown.MouseLeftButtonUp和MouseMove)来完成,实际 ...

  3. H5系列之地理位置（必知必会）

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  4. H5系列之video自己编写控制栏

    首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...

  5. H5系列之canvas

    what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着Ja ...

  6. H5系列之常用的语义元素

    H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...

  7. H5系列之新input

    虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好.基本只有google浏览器能用.但是既然出了,那么就要了解他,知道有这么一个东西就好. input类型 ...

  8. H5系列一、静态页面总结

    1.img父标签设置高度,如果容器没有设置高度的话,图片会默认把容器底部撑大几像素 -- 大概3px,给容器设置高度. 2.input标记换行后默认有一个间隙,设置float属性.input标记默认还 ...

  9. H5系列之svg

    svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的. 也就是,他依赖分辨率,会根据分辨率来决定图形是否清 ...

随机推荐

  1. 动态规划专题一：线性dp

    第一篇博客随笔,被迫写的bushi 上课讲的动态规划入门,还是得总结一下吧 背包 01背包 背包有容量限制,每一件物品只能够取一件(这就是为什么j从V至v[i]循环的原因) 思路:f数组表示当前状态的 ...

  2. viewPager删除缓存fragment

    fragment结合viewpager会缓存fragment在内存,除非退出程序,想要不退出程序情况下刷新fragment页面,就要删除缓存; public class MainActivity ex ...

  3. 排名靠前的几个JS框架发展趋势和前景

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/top-5-javascript-frameworks ...

  4. JVM的艺术—类加载器篇（二）

    分享是价值的传递,喜欢就点个赞 引言 今天我们继续来深入的剖析类加载器的内容.上节课我们讲了类加载器的基本内容,没看过的小伙伴请加关注.今天我们继续. 什么是定义类加载器和初始化类加载器? 定义类加载 ...

  5. jar文件无法双击打开

    1.  jdk安装后环境变量未设置好 (无jdk先自行下载) 我的电脑-属性-高级系统设置-环境变量-系统变量 找到path:添加环境变量为"java/jdk/bin"文件夹路径( ...

  6. 不停机不更新代码线上调试BUG的工具

    如果你有以下痛点,请你查看本文章: 1.我改的代码为什么没有执行到?难道是我没 commit?分支搞错了? 2.遇到问题无法在线上 debug,难道只能通过加日志再重新发布吗? 3.线上遇到某个用户的 ...

  7. 剑指offer之打印超过数组一半的数字

    问题描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  8. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...

  9. c# ToolStrip控件图片和文字显示--原创

    如上图达到这样的效果 首先我们给属性Image和Text分别赋予需要显示的图片和文字 然后设置DisplyStyle属性为ImageAndText,意为同时显示图片和文字 各种设置ImageAlign ...

  10. rabbitmq-参考

    rabbitMQ http://lynnkong.iteye.com/blog/1699684 http://jzhihui.iteye.com/category/195005