<!DOCTYPE html>

<html class="no-js">

    <head>

        <meta charset="utf-8">

        <title>HTML5-draggable(拖放)</title>

        <style type="text/css">

            #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

        </style>

        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            /*

             * 虽然已经设定了img元素可被拖动，但是浏览器默认地，无法将数据/元素放置到其他元素中。

             * 如果有需要设置某些元素可接受被拖动元素，则要阻止它的默认行为，

             * 这要通过设置该接收元素的ondragover 事件，调用event.preventDefault() 方法

             */

            function allowDrop(ev) {

                ev.preventDefault(); //阻止默认行为

                //ev.target.id

                //此处ev.target是接收元素，通过事件被绑定在哪个元素即可区分

            }

            /*

             * 当该img元素被拖动时，会触发一个ondragstart 事件，该事件调用了一个方法drag(event)。

             */

            function drag(ev) {

                //ev.dataTransfer.setData() 方法设置被拖数据的数据类型（Text）和值（被拖元素id），

                //该方法将被拖动元素的id存储到事件的dataTransfer对象内，ev.dataTransfer.getData()可将该元素取出。

                //此处ev.target是被拖动元素

                ev.dataTransfer.setData("Text", ev.target.id);

            }

            /*

             * 当被拖元素移动到接收元素，

             * 松开鼠标时（即被拖元素放置在接收元素内时）会出发ondrop事件

             */

            function drop(ev) {

                ev.preventDefault(); //阻止默认行为

                var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出

                ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部

            }

        </script>

    </head>

    <body>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

            <!--为了使元素可拖动，把 draggable 属性设置为 true-->

            <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

        </div>

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

HTML5-draggable(拖放)的更多相关文章

  1. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  2. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  3. HTML5 — 让拖放变的流行起来

    先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变 ...

  4. HTML5之拖放

    - Draggable 标签  文件拖放 99年IE5开始,05后所有浏览器支持(除了opera) <li id=be draggable=true ondragstart="star ...

  5. HTML5 元素拖放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5 总结-拖放-3

    HTML5 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 ...

  7. HTML5 原生拖放

    前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标 相关知识点: 1.拖放事件 拖放元素时,将依次触发下列事件 dragstart  按 ...

  8. 【HTML5】拖放（Drag 和 drop）

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  9. HTML5的拖放事件

    1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...

  10. HTML5 的拖放（实例：两个div之间拖放图片）

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...

随机推荐

  1. 关于composer

    Composer PHP依赖管理的新时代http://segmentfault.com/a/1190000000353129 Composer 的主页   https://getcomposer.or ...

  2. rm反向删除的几种方法

    关键词:rm  删除 反向 参考: http://blog.sina.com.cn/s/blog_67e34ceb01014930.html http://bbs.csdn.net/topics/39 ...

  3. iOS 应用有用户评论功能 因为潜在色情信息被退回解决方案

    应用的每一次退回都是一次很好的学习机会 这次是说我的应用没有对色情的内容进行监管或屏蔽的管理机制 这里我主要是 评论页面 违法 如下 以下提供几种解决方案: 1.按照苹果给的建议  我们添加协议进去 ...

  4. 数据库实例创建好后，用plsql登录居然提示ora-12526监听程序:所有适用例程都处于受限模式的问题

    解决办法:以sys身份登录执行该语句:ALTER SYSTEM DISABLE RESTRICTED SESSION;

  5. Linq中使用Left Join

    use Test Create table Student( ID ,) primary key, ) not null ) Create Table Book( ID ,) primary key, ...

  6. iOS之GCD的局部解析

    一什么是GCD :(Grand [伟大] Central [中央]  Dispatch[调度]) GCD又名“伟大的中央调度器”,他是iOS4后才引进的一种多线程技术.开发者只需定义想执行的任务兵追加 ...

  7. 重构6-Push Down Field（字段下移）

    与上移字段相反的重构是下移字段.同样,这也是一个无需多言的简单重构. public abstract class Task { protected String _resolution; } publ ...

  8. 剑指Offer33 第一个只出现一次的字符

    /************************************************************************* > File Name: 33_FirstN ...

  9. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  10. SPOJ 7758. Growing Strings AC自动机DP

    Growing Strings 题目:给出n个字符串,问最多能够选出多少个串组成序列,并满足前一个字符串是后一个字符串的子串. 分析: AC自动机经典水题... 考虑每个节点结尾时,他能够选出最多的串 ...