<!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. jquery 上滑加载更多

    $(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var page ...

  2. 停止node进程和查看react-native-cli

    taskkill /f /t /im node.exe which react-native

  3. [转]vux使用教程

    原文:https://blog.csdn.net/revival_liang/article/details/78267992 <1>. 在项目里安装vuxnpm install vux ...

  4. TP5对数据库操作的事物作用

    假如: 你写好了一段完整的代码,模型对数据库的操作,增删改查什么的,都没有问题,当然运行速度也是最快的,完全不用担心会出错, 前提肯定是已经写好的一整段代码, 但是,万一服务器中断了呢,执行一半,后面 ...

  5. 前端浏览器自动刷新神器：Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

  6. bash内建命令

    bash内建命令 1.local命令 基本介绍 local命令是用来定义一个局部变量的,它只能定义在函数中,并且随着函数的结束而被销毁 基本语法 local  [option]  name[=valu ...

  7. webservice接口和http接口介绍---更新版

    web service(SOAP)与HTTP接口的区别什么是web service? soap请求是HTTP POST的一个专用版本,遵循一种特殊的xml消息格式Content-type设置为: te ...

  8. PA教材提纲 TAW10-2

    Unit1 Introduction to the ABAP Dictionary(ABAP字典介绍) 1.1 Describing the ABAP Dictionary(描述ABAP字典) ABA ...

  9. angular6 引用echart第一次数据不显示解决

    1 使用promise从后台返回数据后,页面还是比数据更快的加载出来,导致echart图页面加载的时候不显示问题 1.1 html <div echarts [options]="do ...

  10. day09三目运算

    内容详细 1.三目运算(三元运算) v=前面 if 条件 else 后面 if 条件: v="前面" else: v="后面" #让用户输入值,如果值是整数,则 ...