<!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. Zynq系列程序逻辑固化方法

    1.创建一个BOOT镜像 该小节主要讲述zynq平台利用软件套件SDK创建一个可固化BOOT镜像. 1.1  选择Ad9361_Eque1工程,选择Xilinx Tools → Create Boot ...

  2. 2019-04-19-day036-协程与进程池

    内容回顾 11:30 码云 :王老师检查作业+定期抽查 注册账号 考试的时间 threading.enumerate(),能够获取到当前正在运行的所有线程对象列表 守护线程 守护线程会等待所有的非守护 ...

  3. Linux 驱动——Button驱动4（fasync）异步通知

    button_drv.c驱动文件: #include <linux/module.h>#include <linux/kernel.h>#include <linux/f ...

  4. mysql 数据库查看表的信息

    查看正在改动的数据库: 1. select database(); 2. status;   查看表的结构: desc table_name show columns from table_name ...

  5. java求最大值以及定义方法调用

    class ArrayDome { public static void main(String[] args) { int[] arr = {-12,-51,-12,-11}; int max = ...

  6. Spring Boot 框架的依赖管理

    Spring Boot为完成不同需求的Spring应用构建,提供了多种不同的依赖管理模板,每种模板均为一系列已完成的依赖的管理.例如在我们的入门程序中,需要构建web项目,我们只需添加spring-b ...

  7. SVN使用方法

    用了一年多SVN了,突然想起来对SVN操作做一个总结,以免有些操作不常用而忘记,也希望可以帮到其他人. 准备工作: 在使用SVN时首先就是要在服务器安装SVN管理端(VisualSVN),在电脑上安装 ...

  8. Codeforces1056E.Check Transcription（枚举+Hash）

    题目链接:传送门 题目: E. Check Transcription time limit per test seconds memory limit per test megabytes inpu ...

  9. 20164322韩玉婷 -----Exp1 PC平台逆向破解

    Exp1 PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同时包含另一 ...

  10. 请求转发和URL重定向的原理和区别

    一.请求转发和重定向是在java后台servlet中,由一个servlet跳转到另一个servlet/jsp要使用的技术 使用方法 请求转发  req.getResquestDispatcher(se ...