<!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. C++中cin.getline与cin.get要注意的地方

    cin.getline与cin.get的区别是,cin.getline不会将结束符或者换行符残留在输入缓冲区中.

  2. ChIP-seq基本流程及工具

    ChIP-seq数据分析整理 1.Alignment 2.Peak detection 3.Peak annotation 1. GO analysis 2. Pathway analysis 4.D ...

  3. TowSum

  4. plsql插入数据出现乱码问题

    今天在使用plsql 插数据时 ,遇到的问题就是插入进去是乱码问题,在这里总结一下如何解决的 首先声明一下就是: 现在只有客户端,没有服务端,有一些需求就是总是有许多数据要插入进去,但是在使用sql语 ...

  5. rm: cannot remove ' xxx': Permission denied

    一般出现这个问题的原因是权限被改变了,使用chown 修改即可 可参考:chmod.chgrp.chown详解 linux chmod命令和chown命令

  6. SQLite 读取数据时，随机顺序

    SELECT * FROM [数据表] ORDER BY random() 通过 random() 这个函数来排序

  7. power_save模式

    802.11的电源管理模式分为:主动模式(Active Mode)和省电模式(Power Save Mode). Power Save模式的工作原理: Beacon讯框中包含了一组名为Traffic ...

  8. python笔记-数学、元组、日期、文件

    python在很多地方和C++相似,比如都会有关系.逻辑等运算符,但也有不同的地方,比如:#Python Number 类型转换int(x [,base ]) 将x转换为一个整数 long(x [,b ...

  9. Arcgis API for JS——普通分屏联动及二三维联动

    对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结. 一.通过监听View上的鼠标事件变化来进行分屏联动(同一坐标系) (同理可以 ...

  10. DJango 前三天小结

    一 DJango 所有命令: 1下载: 控制台:pip install django== ​pip install django== -i 源解释器:找到解释器,点击加号搜索django 2创建项目; ...