<!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的更多相关文章

  1. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  2. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  3. 炫酷的html5（Drag 和 drop）拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

  4. HTML 学习笔记 （drag & drop）

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  5. html drag api 在firefox 下 拖动出现新窗口的解决办法

    有个功能,需要用drag drop api 来做. 发现在firefox下拖放,会出现新的tab 页签,即使在ondragover.ondrop中使用了event.preventDefault也无济于 ...

  6. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  7. 【html】学习记录-拖放（drag and drop）

    目的:实现拖动目标并放置到指定区域.   使元素可拖动,涉及到元素的全局属性draggable <img draggable="true" /> 即img元素设置为可拖 ...

  8. HTML 5 拖放(Drag 和drop)

    浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

  9. HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. html5 drag

    这里是学习html5的拖放功能.这个API主流浏览器基本支持.ie浏览器是有限支持,dataTransfer.setData/getData. 在html5里面,任何元素都是可以拖放的. 需要拖放的元 ...

随机推荐

  1. webdriver高级应用- 禁止IE的保护模式

    #encoding=utf-8 from selenium import webdriver from selenium.webdriver.common.desired_capabilities i ...

  2. day04_08 while循环02

    练习题: 1.输出九九乘法表 2.使用#号输出一个长方形,用户可以指定宽和高,如果长为3,高为4,则输出一个 横着有3个#号,竖着有4个#号 的长方形. 3.如何输出一个如下的直角三角形,用户指定输出 ...

  3. 九度oj 题目1458：汉诺塔III

    题目描述: 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右边的杆上,条件是一次只能移动 ...

  4. Jdbc执行存储过程报数据库事务无法执行的异常

    Jdbc执行存储过程报数据库事务无法执行的异常 环境: Eclipse+Jdk1.7+spring-jdbc-3.0.7+同版本的jdbctemplate+Sqlserver 2012 问题: 一个小 ...

  5. java面试题之Executor和Executors的区别

    Executor 接口对象能执行我们的线程任务: Executors 工具类的不同方法按照我们的需求创建了不同的线程池,来满足业务的需求. ExecutorService 接口继承了Executor接 ...

  6. 【bzoj1257】[CQOI2007]余数之和sum

    [bzoj1257][CQOI2007]余数之和sum 2014年9月1日1,9161 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod ...

  7. ApplicationContext,WebApplicationContext

    servletContext 是web应用程序的大环境,用于存储整个web应用程序级别的对象. ApplicationContext,WebApplicationContext 是Spring的Bea ...

  8. Java--消除重复数字后的最大值

    描述: 一个长整型数字,消除重复的数字后,得到最大的一个数字. 如12341 ,消除重复的1,可得到1234或2341,取最大值2341. 42234,消除4 得到4223 或者 2234 ,再消除2 ...

  9. “百度杯”CTF比赛 九月场_Test（海洋cms前台getshell）

    题目在i春秋ctf训练营 又是一道cms的通用漏洞的题,直接去百度查看通用漏洞 这里我使用的是以下这个漏洞: 海洋CMS V6.28代码执行0day 按照给出的payload,直接访问url+/sea ...

  10. hdu 5437(优先队列模拟)

    Alisha’s Party Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...