基本情况

在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. 【GC概述以及查看堆内存使用】Java内存管理和GC学习

    内存划分 1.JAVA内存主要划分为方法栈.方法区.堆. 2.方法栈上内存会自动释放: 3.方法区上主要加载了类的元信息.静态变量.常量.改区域又称为持久代(Perm Gen),默认是最小16M,最大 ...

  2. 理解 LARGE_INTEGER的定义

    http://bbs.csdn.net/topics/310239341 #if defined(MIDL_PASS) typedef struct _LARGE_INTEGER { #else // ...

  3. 遇到很多次，要注意区分service调用，本地用户调用这些区别

    WTSQueryUserToken返回1314   The WTSQueryUserToken function obtains the primary access token of the log ...

  4. - > 并查集+路径压缩（详解）（第一节）

    先举一个友爱的例子解释一下并查集: 话说江湖上散落着各式各样的大侠,有上千个之多. 他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的,就免不了要打一架.但大侠们有一个优点就是讲义 ...

  5. 十进制浮点数转换成IEEE754标准的32浮点数的二进制格式

    参考: http://jimmygod.blog.163.com/blog/static/43511339200792605627411/ http://blog.csdn.net/archersab ...

  6. Unity3D开发——LeRunning的人物角色信息的显示

    ///////////////////////2015/08/22/////////////// //////////////////////by    xbw/////////////////// ...

  7. Java进程堆外内存（off heap）大小

    一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...

  8. 微信前端js sdk以外的开发

    此时页面中就会出现刚才我画红圈部分的工具条. 这个工具条再加上上面的标题栏工具条. 极大的降低了可视区域的面积. 是否能将它去掉呢?答案是能够的.增加以下代码就能够去掉微信中以下的工具条: docum ...

  9. bookstrap form表单简单-smart-form

    代码: <form class="smart-form" id="smartForm"> <fieldset> <legend&g ...

  10. highcharts注意事项

    var json = [ {"id":"1","tagName":"apple"}, {"id":& ...