基本情况

在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. JRobin cpu 和 磁盘

    https://blog.csdn.net/li_zhongnan/article/details/3754053 https://blog.csdn.net/li_zhongnan/article/ ...

  2. kendo Cannot read property 'call' of undefined

    造成这个错误的原因是在 必须有id的定义

  3. 对象和变量的并发访问synchronized解析以及死锁分析排查

    一.synchronized java并发编程中存在“非线程安全"问题.“非线程安全"是指发生在多个线程对同一个对象中的实例变量并发访问时,产生的”脏读“现象,使用synchron ...

  4. 洛谷—— P2149 [SDOI2009]Elaxia的路线

    https://www.luogu.org/problem/show?pid=2149 题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两 ...

  5. T5090 众数 codevs

    http://codevs.cn/problem/5090/ 时间限制: 1 s  空间限制: 1000 KB  题目等级 : 青铜 Bronze 题目描述 Description 由文件给出N个1到 ...

  6. JVM内存分布和垃圾回收

    内存区域划分   程序计数器(Program counter Register) 描述  程序计数器(Program Counter Register)是一块较小的内存空间.它可以看作是当前线程执行的 ...

  7. ZMQ源代码分析（一）-- 基础数据结构的实现

    yqueue 和 ypipe zmq号称是"史上最快的消息队列",由此可见zmq中最重要的数据结构就是队列. zmq的队列主要由yqueue和ypipe实现.yqueue是队列的基 ...

  8. 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它

    一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...

  9. [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  10. AOP设计场景

    AOP就是切面编程的一个思想,当然完毕一项编码任务,发现有些东西是反复工作,这时就能够考虑使用AOP编程.把一些共性的东西交给它来完毕,我们仅仅关心业务逻辑的东西,最精彩用的场景有两种: 一,控制数据 ...