基本情况

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable="true"属性的元素

目标元素

任意元素都能成为目标元素

事件监听

//拖拽元素

ondrag         //应用于拖拽元素，整个拖拽过程都会调用

ondragstart    //应用于拖拽元素，当拖拽开始时调用

ondragleave    //应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend      //应用于拖拽元素，当拖拽结束时调用
//目标元素

ondragenter    //应用于目标元素，当拖拽元素进入时调用

ondragover     //应用于目标元素，当停留在目标元素上时调用

ondrop         //应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave    //应用于目标元素，当鼠标离开目标元素时调用

 默认事件

ondragover    //默认不会让其他盒子放置在盒子内,e.preventDefault()可以组织默认事件

拖拽案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            width: 400px;

            height: 400px;

            background-color: greenyellow;

        }

        .box2 {

            margin: 0px auto;

        }

        ul {

            width: 100%;

            height: 100%;

            list-style: none;

        }

        li {

            float: left;

            width: 100px;

            height: 100px;

            background-color: #cccccc;

            border-radius: 50px;

            text-align: center;

            line-height: 100px;

        }

    </style>

</head>

<body>

<div class="box1">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

<div class="box2">

    <ul>

    </ul>

</div>

<script>

    var liArr = document.querySelectorAll(".box1 ul li");

    var box2 = document.querySelector(".box2");

    var ul = document.querySelector(".box2 ul");

    var currLi = null;

    for (var i = 0; i < liArr.length; i++) {

        liArr[i].draggable = true;

        liArr[i].ondragstart = function (ev) {

            currLi = this;

        }

    }

    ul.ondragover = function (e) {

        e.preventDefault();

    }

    ul.ondrop = function (ev) {

        ul.appendChild(currLi);

    }

</script>

</body>

</html>

html5——拖拽的更多相关文章

  1. Html5拖拽复制

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

  2. html5拖拽

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

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

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

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

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

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

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

  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有 ...

  10. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

  1. poj 2823 二分法+单调队列

    #include<stdio.h> #include<string.h> #define N  1100000 int a[N]; int fmin[N],fmax[N]; i ...

  2. 备用交换机（cogs 8）

    [问题描述] n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间接与其它城市连接.因电子设备容易损坏,需给通讯点配备备用交换机.但备用交换机数量有限,不能全部配备,只能给部分重要城市配置.于是规 ...

  3. T1075 明明的随机数 codevs

    http://codevs.cn/problem/1075/ 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description 明明想在学校中 ...

  4. 洛谷—— P1339 [USACO09OCT]热浪Heat Wave

    P1339 [USACO09OCT]热浪Heat Wave 题目描述 The good folks in Texas are having a heatwave this summer. Their ...

  5. ZOJ——3609 Modular Inverse

    Modular Inverse Time Limit: 2 Seconds      Memory Limit: 65536 KB The modular modular multiplicative ...

  6. Mcrouter-基于Memcached协议的缓存层流量管理工具（Memcached集群的另一个选择）（转）

    Mcrouter 是一个基于Memcached协议的路由器,它是 Facebook缓存架构的核心组件,在峰值的时候,它能够处理每秒50亿次的请求.近日,Facebook开放了Mcrouter的源代码, ...

  7. Ubuntu18.04卸载lnmp

    1.卸载 apache2 sudo apt-get --purge remove apache2* sudo apt-get autoremove apache2 (--purge 是完全删除并且不保 ...

  8. Js通用验证

    //-----------------------------------------------------js 验证封装 zhy2014-07-10------------------------ ...

  9. (WIP) DPDK理论学习(by quqi99)

    作者:张华  发表于:2016-04-22版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 组成模 ...

  10. 【翻译自mos文章】将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边

    将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边 參考原文: How To Extract Datapump File From ASM Diskgroup To Local Files ...