<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">
 
 
 
 

HTML5 拖放实例的更多相关文章

  1. HTML5 拖放

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

  2. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  3. 【HTML5】实例练习

    1.许多时髦的网站都提供视频.如果在网页上展示视频? <!DOCTYPE HTML> <html> <body> <video width="320 ...

  4. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  5. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  6. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  7. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  8. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  9. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

随机推荐

  1. 北大poj- 1008

    Maya Calendar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 80956   Accepted: 24892 D ...

  2. shell编程规范

    1 脚本名以.sh结尾,名称尽量见名之意,比如ClearLog.sh Clear_Log.sh clearlog.sh SerRestart.sh Ser_Restart.sh;2 尽量使用UTF-8 ...

  3. springboot单元测试自动回滚：@Transactional

    2019-04-21 12:23:14.509 INFO 9384 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - St ...

  4. 搭建QT环境

    开始使用QT时,环境配置好了,以后才不会有这方面的麻烦,所以第一步,把自己的工作环境搭建好! 下面是我的环境搭建过程,留个记录,也为了后来者能少走一些弯路. 注:本人的系统是WIN7x64位的,其他系 ...

  5. Python多进程并发(multiprocessing)

    1.新建单一进程 如果我们新建少量进程,可以如下: 2.使用进程池 是的,你没有看错,不是线程池.它可以让你跑满多核CPU,而且使用方法非常简单. 注意要用apply_async,如果落下async, ...

  6. Python mysql-python及pycurl使用一例

    #环境:CentOS Linux release 7.5.1804 (Core) mini安装,使用python2.7 #使用pucurl对输入的url地址进行测试,将结果存放到mysql中,代码来之 ...

  7. tensorflow 学习纪录（持续更新）

    import tensorflow as tf import numpy as np #tensor = tf.constant([[1,2,3,4,5,6,7,8],[1,2,3,4,5,6,7,8 ...

  8. python基础（七）

    一.接口开发 import pymysql def my_db(sql): conn = pymysql.connect( host='118.24.3.40', user='jxz', passwo ...

  9. servlet的生命周期和servlet的继承关系

    一.servlet的生命周期 一个servlet类的对象   加载——>实例化——>初始化——>服务——>销毁 第一次访问某个servlet的时候 首先调用其 构造函数 pub ...

  10. 实验九 ZStack 广播通信实验

    实验九 ZStack 广播通信实验[实验目的]1. 了解 ZigBee 广播通信的原理2. 掌握在 ZigBee 网络中进行广播通信的方法[实验设备]1. 装有 IAR 开发工具的 PC 机一台2.  ...