Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { margin: 0; } canvas { display: block; }
JavaScript
"use strict"; /* Johan Karlsson (DonKarlssonSan) Dragging images */ var Rectangle = (function () { function Rectangle(pos, img) { this.pos = pos; this.img = img; this.width = img.width; this.height = img.height; } Rectangle.prototype.draw = function () { image(this.img, this.pos.x, this.pos.y); }; Rectangle.prototype.hits = function (hitpos) { if (hitpos.x > this.pos.x && hitpos.x < this.pos.x + this.width && hitpos.y > this.pos.y && hitpos.y < this.pos.y + this.height) { return true; } return false; }; return Rectangle; }()); var rects; var dragRec; var isDragging; var clickOffset; var imgCb; function preload() { imgCb = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/254249/Exit_planet_dust_album_cover.jpg?a=1"); } function setup() { rects = []; placeImages(); isDragging = false; createCanvas(windowWidth, windowHeight); } function placeImages() { var numImage = 5; for (var i = 0; i < numImage; i++) { var pos = randomPos(imgCb.width, imgCb.height); rects.push(new Rectangle(pos, imgCb)); } } function randomPos(marginRight, marginBottom) { return createVector(random(0, windowWidth - marginRight), random(0, windowHeight - marginBottom)); } function draw() { clear(); rects.forEach(function (r) { return r.draw(); }); } function mousePressed() { var m = createVector(mouseX, mouseY); var index; rects.forEach(function (r, i) { if (r.hits(m)) { clickOffset = p5.Vector.sub(r.pos, m); isDragging = true; dragRec = r; index = i; } }); if (isDragging) { putOnTop(index); } } function putOnTop(index) { rects.splice(index, 1); rects.push(dragRec); } function mouseDragged() { if (isDragging) { var m = createVector(mouseX, mouseY); dragRec.pos.set(m).add(clickOffset); } } function mouseReleased() { isDragging = false; } function windowResized() { resizeCanvas(windowWidth, windowHeight); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖动图像p5js-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号