基本情况

在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. [codevs 1961]躲避大龙（dfs)

    题目:http://dev.codevs.cn/problem/1961/ 分析: 被“SPFA”的标签骗了…… 看了hzwer的博客才知道可以用f[i][0..60]表示每个点每个秒是否可以到.至于 ...

  2. ubuntu16.04 卸载 php7并安装php5.6记录

    ubuntu16.04版本从默认源安装的php版本为7.x版本,我们都知道php7.0已经舍弃了很多旧版本的函数等内容,这对旧系统来说是致命的,那么,我们就有了安装旧版php的需求,而同一主机安装两个 ...

  3. iOS: 学习笔记, Swift操作符定义

    Swift操作符能够自行定义, 仅仅须要加上简单的标志符就可以. @infix 中置运算. 如+,-,*,/运算 @prefix 前置运算. 如- @postfix 后置运算. a++, a-- @a ...

  4. Ubuntu12.04LTS 安装 eclipse

    首先安装JDK,参考:Ubuntu12.04.3LTS安装Oracle Java 7 然后安装eclipse: 安装方法一:通过命令行/Software Center下载Ubuntu源中的Eclips ...

  5. ZOJ 3209 Treasure Map （Dancing Links 精确覆盖 ）

    题意 :  给你一个大小为 n * m 的矩形 , 坐标是( 0 , 0 ) ~ ( n , m )  .然后给你 p 个小矩形 . 坐标是( x1 , y1 ) ~ ( x2 , y2 ) , 你选 ...

  6. splay专题复习——bzoj 3224 &amp; 1862 &amp; 1503 题解

    [前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...

  7. 【网络流】 HDU 3468 Treasure Hunting

    题意: A-Z&&a-z 表示 集结点 从A点出发经过 最短步数 走到下一个集结点(A的下一个集结点为B ,Z的下一个集结点为a) 的路上遇到金子(*)则能够捡走(一个点仅仅能捡一次) ...

  8. Getting console.log output with Selenium Python API bindings

    持久化存储 Getting console.log output from Chrome with Selenium Python API bindings - Stack Overflow http ...

  9. 处理new分配内存失败情况

    转自:http://www.51testing.com/html/70/n-827070.html 在C++语言中,我们经常会使用new给一个对象分配内存空间,而当内存不够会出现内存不足的情况.C++ ...

  10. ubuntu16.04安装flash player

    ubuntu16.04安装flash player sudo apt-get install flashplugin-installer 1 2019: apt-get install browser ...