drag-html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</section>
</body>
</html>
drag-html的更多相关文章
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 通过HTML5的Drag and Drop生成拓扑图片Base64信息
HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...
- 炫酷的html5（Drag 和 drop）拖放
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...
- HTML 学习笔记 （drag & drop）
拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...
- html drag api 在firefox 下 拖动出现新窗口的解决办法
有个功能,需要用drag drop api 来做. 发现在firefox下拖放,会出现新的tab 页签,即使在ondragover.ondrop中使用了event.preventDefault也无济于 ...
- HTML5魔法堂：全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- 【html】学习记录-拖放（drag and drop）
目的:实现拖动目标并放置到指定区域. 使元素可拖动,涉及到元素的全局属性draggable <img draggable="true" /> 即img元素设置为可拖 ...
- HTML 5 拖放(Drag 和drop)
浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...
- HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- html5 drag
这里是学习html5的拖放功能.这个API主流浏览器基本支持.ie浏览器是有限支持,dataTransfer.setData/getData. 在html5里面,任何元素都是可以拖放的. 需要拖放的元 ...
随机推荐
- Hive安装步骤
首先解压压缩包 然后进入bin 执行 ./hive 不过现在hive使用的是自己默认的数据库,不方便,可以通过配置使用MySQL数据库 创建hive-site.xml 粘贴一下内容 <confi ...
- 修改const变量
看下面的一段代码 ; int * j=(int*)(&i); // 运行正确,j确为i的地址,但 int *j=&i; 编译错误 *j=; //确实改变了i的值 printf(&quo ...
- .NET开发时让人头痛的SESSION超时
前言 不知道大家在使用用.NET的SESSION的时候有没有遇到过很奇怪的问题,不时候不知道怎么回事,这个SESSION就无缘无故的丢失了 怎么也想不通,不是说SESSION很可靠的吗?这个问题要好好 ...
- iOS学习笔记26-视频播放
一.视频 在iOS中播放视频可以使用两个框架来实现: MediaPlayer框架的MPMoviePlayerController和MPMoviePlayerViewController AVFound ...
- HDU4548 美素数
Problem Description 小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识. 问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素 ...
- HDU——1982Kaitou Kid - The Phantom Thief (1)（坑爹string题）
Kaitou Kid - The Phantom Thief (1) Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/327 ...
- HUST-1407 郁闷的小J
离线做法:分别处理每个编号上的各种询问和操作,接着就能用树状数组维护. #include <cstdlib> #include <cstdio> #include <cs ...
- TCP/IP（域名DNS）
域名是不带http://的. 有DNS就能解析域名,只要联网,不用担心你的域名和IP无法映射起来. 当然,域名和IP的映射也可以通过本地hosts文件(优先于DNS)添加.C:\Windows\Sys ...
- P3919 (模板)可持久化数组 (主席树)
题目链接 Solution 主席树水题,连差分的部分都不需要用到. 直接用主席树的结构去存一下就好了. Code #include<bits/stdc++.h> #define mid ( ...
- iOS-汉字排序
* 在IOS开发过程中,排序是我们经常遇到的问题,那么如何进行排序呢? * 在英文状态下,系统中有直接可以调用的方法. 例如:对数组[sss, aaa, bbb, ppp]进行排序,我们可以直接 ...