<!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. 开始PYTHON之路

    曾经的功献给了球场酒精 曾经的激情也献给了爱情 曾经的智商用来副本求生 曾经的VB6老迈的只剩点0 曾经的SQL2000都不兼容 曾经........ 还有一些理想没有实现 还得继续在这个世界谋生 岁 ...

  2. Anagram字符串处理（STL真方便啊。。）

    题意:给出一些字符串,认为各个字符个数相同的字符串就是相同的,不区分大小写,找出这些字符串中不与其他字符串相同的字符串并挨个输出 用char orgin[][]把每个字符串保存起来,然后对每个字符串都 ...

  3. Request.ServerVariables参数说明

    Request.ServerVariables["SERVER_NAME"] '获取服务器IP Request.ServerVariables["HTTP_REFERER ...

  4. （转）解决NSMutableAttributedString富文本,不同文字大小水平轴对齐问题(默认底部对齐)

    默认是底部对齐,其实对的也不齐, 目标效果:  代码: NSBaselineOffsetAttributeName 基线偏移量: 调整: NSBaselineOffsetAttributeName的值 ...

  5. mysql 索引查询 、创建 create index 与 add index 的区别

    1.索引查询 ------TABLE_SCHEMA  库名:TABLE  表名 ------AND UPPER(INDEX_NAME) != 'PRIMARY'  只查询索引,不需要主键 SELECT ...

  6. 【python全栈开发】初识python

    本人最开始接触python是在2013年接触,写过hello word!在此之前对开发类没有多大兴趣,不知道重要性,属于浑浑噩噩,忙忙乎乎,跌跌撞撞的.随后选择了Linux运维作为就业主攻方向. 经过 ...

  7. linux ps 按进程消耗内存资源大小排序

    linux ps 关于sort的解释 --sort spec specify sorting order. Sorting syntax is [+|-]key[,[+|-]key[,...]] Ch ...

  8. 【oracle】ORA-12541:TNS:no listener

    查看监听文件 locate listener.ora 切换到数据库用户 su - ora11g 查看监听状态 状态显示,监听没有打开 开启监听,start后面加上你需要启动的监听名字(因为listen ...

  9. linux 常用命令积累

    工作中常用的linux记录一下,方便查询使用 1.ln 创建连接 ,就是window上的快捷方式 创建软连接  ln -s 源文件 目标文件名   经常访问的文件夹(项目文件夹),在~创建一个软连很方 ...

  10. EM 算法最好的解释

    https://wenku.baidu.com/view/fcb6a52bf5335a8102d220e3.html