基本情况

在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. [K/3Cloud] 如何在k3Cloud主页实现自定义页面的开发

    过自定义页签动态添加一些内容,比如网页链接.图片等. 如果是动态的增加链接,可以参考一下代码,然后在ButtonClick事件里面对链接进行处理. public override void After ...

  2. 生产（production）

    [题目描述] 工厂为了生产一种复杂的产品,给各个生产部门制定了详细的生产计划.那么,就经常会有生产部门要把产品送到另一个生产部门作为原料.这是一个注重产品质量的工厂,所以每当有产品要从A部门运到B部门 ...

  3. Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息，没有进度条和Logo，或者只有紫色界面，或者没有开机画面等问题解决

    主要有以下解决方法: 1.如果之前配置过Grub来显示详细的命令信息的,那么改回去就行了,参考:http://www.cnblogs.com/EasonJim/p/7129873.html,通过这种方 ...

  4. 犀牛Phinoceros 如何切换中文语言

    Tools-Options-Rhino Options-Appearance,然后改成中文        

  5. LeetCode234_PalindromeLinkedList (推断是否为回文链表) Java题解

    题目: Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) ...

  6. Python3基础（四） 条件与循环控制

    Python的流程控制语句包括:if条件语句.while循环语句.for循环语句.range函数以及break.continue.pass控制语句.这些语句在Python中的语义和在其他语言中基本是一 ...

  7. wpf 禁用启用webbroswer右键菜单

    //禁用脚本错误等类似的窗口信息 this.webBrowser1.ScriptErrorsSuppressed = true; //禁用右键菜单 this.webBrowser1.IsWebBrow ...

  8. 为部门整理的mysql_db使用军规

    mysql_db使用军规: 1.禁止开发測试人员在IDC环境手工删除和改动数据 2.全部需求通过DB工具系统提交 3.禁止在IDC环境DB进行測试 4.IDC环境提交的sql语句一定要经过非正式环境验 ...

  9. Pell Sequence

    /* * PellSequence.cpp * * Created on: 2013-09-08 16:46 * Author: lg * Description: a1 = 1, a2 = 2, . ...

  10. 【Aladdin Unity3D Shader编程】之四 贴图纹理

    关于纹理贴图介绍 纹理坐标也叫UV坐标,UV坐标都是0~1,并不是我们所理解的像素坐标,相当于是一个百分比. 编写shader映射纹理 将纹理的颜色取代漫反射的颜色 Shader "Alad ...