<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>拖动</title>

    <style type="text/css">

        /*--04--*/

        #cun{

            background-color: cornflowerblue;

            width: 500px;

            height: 200px;

        }

        #tuo{

            background-color: blue;

            width: 500px;

            height: 200px;

        }

    </style>

    <script type="text/javascript">

        //--02--

        function drag(e){

            document.getElementById("st").innerHTML="开始拖动：drang(event)"+e.target.id;

            //使用setData(数据类型,携带的数据)，将要多方的数据，存入dataTransfer对象中:键值对

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

        }

        //--05--

        function allowDrop(e){

            //不执行默认处理（默认：拒绝拖放）

            e.preventDefault();

            document.getElementById("allow").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");

        }

        //--06--

        function drop(e){

            //不执行默认处理（默认：拒绝拖放）

            e.preventDefault();

            document.getElementById("ov").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");

            //使用getData()获取数据，然后赋值给data：键值对获取

            var data= e.dataTransfer.getData("Text");

            //使用appendChild()方法把拖动的节点元素，放到子元素中

            e.target.appendChild(document.getElementById(data));

        }

    </script>

</head>

<body>

<!--03-->

<div id="cun" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>

<!--01-->

<img id="tuo" src="imgs/img.jpg" draggable="true" ondragstart="drag(event)" width="500px" height="200px">

<br>开始：<span id="st"></span>

<br>允许：<span id="allow"></span>

<br>到达：<span id="ov"></span>

</body>

</html>

　　

HTML5--拖动01的更多相关文章

  1. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  2. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  3. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  4. html5拖动滑块

    html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...

  5. HTML5拖动画布/拖放

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  6. HTML5 学习01——浏览器问题、新元素

    Internet Explorer 浏览器问题 问题:Internet Explorer 8 及更早 IE 版本的浏览器不支持HTML5的方式. <!--[if lt IE 9]> < ...

  7. [整理]html5 WebApp 01

    在正式进入WebApp开发之前,有几个问题要解决: 1.我是产品策划:UI风格,功能设计,产品预期效果(如访问量等各类指标) 2.我是UI设计:图片图标制作,我该按怎样的大小来设计? 3.我是前端开发 ...

  8. HTML5拖动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. html5拖动监听

    在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...

  10. HTML5 学习01

    HTML的英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...

随机推荐

  1. vim 编辑

  2. 【BFS】POJ 3278

    POJ 3278 Catch That Cow 题目:你要去抓一头牛,给出你所在的坐标和牛所在的坐标,移动方式有两种:要么前一步或者后一步,要么移动到现在所在坐标的两倍,两种方式都要花费一分钟,问你最 ...

  3. 不注册Activex 直接调用它

    此处的Activex是ATL方式的. [ComVisible(false)]    [ComImport, InterfaceType(ComInterfaceType.InterfaceIsIUnk ...

  4. IIS运行.NET4.0配置

    IIS运行.NET4.0配置 “/CRM”应用程序中的服务器错误.配置错误说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法 ...

  5. Java直接（堆外）内存使用详解

    本篇主要讲解如何使用直接内存(堆外内存),并按照下面的步骤进行说明: 相关背景-->读写操作-->关键属性-->读写实践-->扩展-->参考说明 希望对想使用直接内存的朋 ...

  6. 《bootstrap》实战---作为了解

    感觉这句话说的挺有道理,"一些最佳实践不管是语义标记还是移动优先的设计,抑或资源性能优化,都需要额外的时间和精力才能时间".用心做,才会做好.

  7. mongoose连接collection后自动加s的问题

    这两天折腾mongoose,发现数据成功写入集合了,但是在Terminal查询的时候却查不到 于是show collections后发现在原来的集合底下,又生成了一个加了s的集合,shenmegui ...

  8. Android课程---添加黑名单的练习（课堂讲解）

    DBHelper.java package com.hanqi.test3; import android.content.Context; import android.database.sqlit ...

  9. hadoop意外之旅－－巧合遇到一只大象

    公司面临转型,所有开发也难免面临转型,开始选择自己想要走的方向进行研究. 说来也巧合,最近正好说搭个hadoop环境玩玩,结果遇到转型还被选为大数据小组组长.(尴尬) 开始一场遇到大象之旅,希望能在这 ...

  10. tomcatPluginV321.zip

    下载地址:http://www.eclipsetotale.com/tomcatPlugin/tomcatPluginV321.zip 或者  http://files.cnblogs.com/fil ...