<!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. 制作一个老旧C118的GSM便携式测试设备

    对于OsmocomBB也是被国内外大神玩得不亦乐乎.什么重定向攻击,中间人攻击.都是N年前的东西咯.当然鄙人不会这些.对于地下市场无非就是获取对方短信小则“老.虎.机”,大则支付宝.某日翻了翻“咸”鱼 ...

  2. configparser模块(ini配置文件生成模块)

    config = configparser.ConfigParser() #初始化config对象 [DEFAULT] #设置默认的变量值,初始化 config["DEFAULT" ...

  3. [转载]JS中 map, filter, some, every, forEach, for in, for of 用法总结

    转载地址:http://codebay.cn/post/2110.html 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5] ...

  4. 轻松理解AOP(面向切面编程)

    https://my.oschina.net/yanquan345/blog/203415

  5. Oracle12c的安装

    直接下一步不多说高级安装可以选择设置,嫌麻烦可以直接典型安装(少些设置步骤)这里随便命用户名,口令即密码此处可以改安装路径可以根据电脑自身配置更改,但建议高于20%(给的越少,Oracle运行速度越慢 ...

  6. 使用linux命令行调整非图形界面分辨率

    第一步,调整linux内核显示参数: 打开内核菜单配置列表文件: vi /boot/grub/menu.lst 或者 vi /boot/grub/gurb.conf 在kernel设置一行末尾添加: ...

  7. c#获取url请求的返回值

    /// <summary> /// 获取url的返回值 /// </summary> /// <param name="url">eg:http ...

  8. Debian系统 + XFCE桌面初识，基础环境搭建

    有幸分享个人的Linux下的习惯配置,具体操作可能阐述得比较粗糙. 在图形化界面进行配置操作,十分简便舒心. Linux发行版:Debian9.5(Stretch) 桌面Sesion:XFCE4 一. ...

  9. intellij idea解除svn关联

    有时候项目需要解除svn关联,百度谷歌几篇,以下方式是最简单快捷的. 从.idea文件夹下手,找到了cvs.xml,其内容如下: <?xml version="1.0" en ...

  10. JavaSE-2018.12.20更新

    JDK:Java Development Kit(java开发工具包,是提供给java开发人员使用的,包含了开发工具(编译工具javac.exe和打包工具jar.exe等)+JRE) JRE:Java ...