HTML5——3 HTML5拖放
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style>
#div1{
width: 300px;
height: 300px;
border: 1px solid #aaabbb;
}
</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>请拖动图片</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<img id="drag1" src="data:images/1.png" draggable="true" ondragstart="drag(event)">
</body>
</html>
HTML5——3 HTML5拖放的更多相关文章
- HTML5 中的拖放
今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5中的拖放
关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...
- html5，html5教程
html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...
- HTML5之一HTML5简介
1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...
- HTML5新增的拖放API---（一）
HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...
- HTML5新属性-----拖放
最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
- HTML5 CSS3 专题 : 拖放 （Drag and Drop）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...
- HTML5 学习05—— 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...
- HTML5 实现文件拖放上传
1. [图片] 5375acf5gw1dusqsscfksj.jpg 2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" ...
随机推荐
- 洛谷 题解 P1196 【[NOI2002]银河英雄传说】
并查集大难题. 看了题解之后才有思路,调了很久很久才AC,当然要写一篇题解来纪念一下. 先来分析一下这些指令的特点,很容易发现对于每个M指令,只可能一次移动整个队列,并且是把两个队列首尾相接合并成一个 ...
- 【转帖】Linux上搭建Samba,实现windows与Linux文件数据同步
Linux上搭建Samba,实现windows与Linux文件数据同步 2018年06月09日 :: m_nanle_xiaobudiu 阅读数 15812更多 分类专栏: Linux Samba 版 ...
- Python 命名规范总结
Python推荐命名规范: 模块名和包名采用小写字母并且以下划线分隔单词的形式: 如:browser_driver 类名或异常名采用每个单词首字母大写的方式: 如:BasePage, Keyboard ...
- python的一些知识点
1. 内置函数 iter 2. 可迭代对象与迭代器:
- COGS 2633. [HZOI 2016] 数列操作e
[题目描述] 一个长度为n的序列,一开始序列数的权值都是0,有m次操作 支持两种操作, 1 L R x,给区间[L,R]内,第一个数加x,第二个数加2^2⋅x,第三个数加3^2⋅x...第R-L+1个 ...
- Codeforces 1097D. Makoto and a Blackboard
传送门 首先考虑如果 $n$ 只有一个质因数的情况,即 $n=p^t$ 那么显然可以 $dp$ ,设 $f[i][j]$ 表示第 $i$ 步,当前剩下 $p^j$ 的概率 那么转移很简单: $f[i] ...
- dl in image process
deep learning目前为止无论在分类还是检测上,都是整体的处理,而不会出现像sift这样的局部特征,这个问题或许如果能克服掉,能让检测效果更进一大步.
- C++单链表类(带头结点)
Link.h #ifndef _LINK_0411 #define _LINK_0411 #include <string> #include <iostream> //定义数 ...
- Unsupported major.minor version 52.0错误和 jdbc odbc
什么是JDBC? JDBC, 全称为Java DataBase Connectivity standard, 它是一个面向对象的应用程序接口(API), 通过它可访问各类关系数据库.JDBC也是jav ...
- python selenium1 模拟点击 测试对象 58同城验证码
#!/usr/bin/python# -*- coding: UTF-8 -*-# @Time : 2019/12/5 17:30# @Author : shenghao/10347899@qq.co ...