I'm trying to code a script, where it automatically drags and releases the "ball" element (which is already draggable) when you click. I'm not trying to reposition the element, I'm trying to actually simulate the drag and release when you click on your mouse.
So, I want the script to:
Find and define your mouse position when you click
Drags and drops the draggable element to the defined position
Here is the code for the "ball" element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/ball.svg" id="ball">
<script>
let currentDroppable = null;
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>
Related
I am using MacBook Pro and mouse is touchpad. I do not use physical mouse.
I am now exercising Javascript events programming. I suppose to make a toolbar, then I could drag and drop image item using Javascript mouse event. I wrote codes as below. Currently, I only implement the ball image could listen to mouse event. My purpose is to select the ball, then a new ball image could be created and put to the place where mouse is moved and released. I could create multiple balls and moved to the body of html page wherever I want.
The following codes could not invoke mouseup events. And the ball sticks to the mouse and could not be released/unattached.
Any help and hints?
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Drag image item from toolbar</p>
<table><tr><td>
<img src="soccer-gate.jpeg" id="gate">
</td>
<td>
<img src="ball.jpeg" id="ball">
</td>
</tr>
</table>
<script>
ball.onmousedown = function(event) {
var ball_temp = document.getElementById("ball");;
var ball_clone = ball_temp.cloneNode(true);
ball_clone.id = "ball_clone";
let shiftX = event.clientX - ball_clone.getBoundingClientRect().left;
let shiftY = event.clientY - ball_clone.getBoundingClientRect().top;
console.log("event client X,Y is ",event.clientX,event.clientY);
ball_clone.style.position = 'absolute';
ball_clone.style.zIndex = 1000;
document.body.append(ball_clone);
function moveAt(pageX, pageY) {
ball_clone.style.left = pageX - shiftX + 'px';
ball_clone.style.top = pageY - shiftY + 'px';
console.log("pageX,pageY is ", pageX,pageY);
}
function onMouseMove(event) {
console.log("mouse move");
moveAt(event.pageX, event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
};
ball.onmouseup = function(event) {
console.log("remove mousemove event")
document.removeEventListener('mousemove', onMouseMove);
};
document.addEventListener('mouseup',onmouseup);
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>
I have to say the truth, I wrote codes by reference a book. And I modify the codes and there are bugs. I use chatGPT finally fix my bugs.
There are two mistakes in original codes. onmouseup shall not be ball.onmouseup, and also this function should be inside onmousedown function.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Drag image item from toolbar</p>
<table><tr><td>
<img src="soccer-gate.svg" id="gate">
</td>
<td>
<img src="ball.svg" id="ball">
</td>
</tr>
</table>
<script>
ball.onmousedown = function(event){
var ball_temp = document.getElementById("ball");;
var ball_clone = ball_temp.cloneNode(true);
ball_clone.id = "ball_clone";
let shiftX = event.clientX - ball_clone.getBoundingClientRect().left;
let shiftY = event.clientY - ball_clone.getBoundingClientRect().top;
console.log("event client X,Y is ",event.clientX,event.clientY);
ball_clone.style.position = 'absolute';
ball_clone.style.zIndex = 1000;
document.body.append(ball_clone);
function moveAt(pageX, pageY) {
ball_clone.style.left = pageX - shiftX + 'px';
ball_clone.style.top = pageY - shiftY + 'px';
console.log("pageX,pageY is ", pageX,pageY);
console.log("event.clientX,event.clientY is ", event.clientX, event.clientY);
console.log("ball_clone.getBoundingClientRect().left,ball_clone.getBoundingClientRect().top is ", ball_clone.getBoundingClientRect().left,ball_clone.getBoundingClientRect().top);
console.log("shiftX,shiftY is",shiftX,shiftY);
console.log("ball_clone.style.left,ball_clone.style.top is",ball_clone.style.left,ball_clone.style.top);
}
function onMouseMove(event) {
console.log("mouse move");
moveAt(event.pageX, event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
onmouseup = function(event) {
console.log("remove mousemove event")
document.removeEventListener('mousemove', onMouseMove);
};
document.addEventListener('mouseup',onmouseup);
ball.ondragstart = function() {
return false;
};
}
</script>
</body>
</html>
I'm trying to add collision detection in my draggable code which works pretty well I guess ,but when I'm trying to drag the orange rectangle above the green one nothing happens.
Is my collision logic right ?
Here is what I tried to do.
//HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href = "stl.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
<script src = "js.js" type = "text/javascript"></script>
</body>
</html>
I used getBoundingClientRect() to get the position of the rectangles.
//JAVASCRIPT code
const el1 = document.querySelector(".item1");
const el2 = document.querySelector(".item2");
var rect1,rect2;
rect2 = el2.getBoundingClientRect();
el1.addEventListener("mousedown", mousedown);
function mousedown(e) {
window.addEventListener("mousemove", mousemove);
window.addEventListener("mouseup", mouseup);
let prevX = e.clientX; // x cursor position
let prevY = e.clientY;//y cursor position
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
rect1 = el1.getBoundingClientRect();
el1.style.left = rect1.left - newX + "px";
el1.style.top = rect1.top - newY + "px";
prevX = e.clientX;
prevY = e.clientY;
//a simple rectangle collision logic funcion
if (rect1.left < rect2.left + rect2.weight &&
rect1.left + rect1.weight > rect2.left &&
rect1.top < rect2.top + rect2.height &&
rect1.height + rect1.top > rect2.top)
{
item2.style.color="#FF0006";
}
}
//function which stops the mousedown event
function mouseup() {
window.removeEventListener("mousemove", mousemove);
window.removeEventListener("mouseup", mouseup);
}
}
I know that item1 require absolute position for draggable action
//CSS code
.item1{
height:50px;
width:50px;
position:absolute;
background:orange;
}
.item2{
height:220px;
width:220px;
position:absolute;
background:green;
top:300px;
left:500px;
z-index:-2;
}
//JAVASCRIPT code
const el1 = document.querySelector(".item1");
const el2 = document.querySelector(".item2");
var rect1,rect2;
rect2 = el2.getBoundingClientRect();
el1.addEventListener("mousedown", mousedown);
function mousedown(e) {
window.addEventListener("mousemove", mousemove);
window.addEventListener("mouseup", mouseup);
let startX = e.clientX; // x cursor position
let startY = e.clientY; //y cursor position
const { left: rectX, top: rectY } = el1.getBoundingClientRect();
function mousemove(e) {
rect1 = el1.getBoundingClientRect();
const diffX = e.clientX - startX;
const diffY = e.clientY - startY;
el1.style.left = (rectX + diffX) + "px";
el1.style.top = (rectY + diffY) + "px";
// https://gamedev.stackexchange.com/questions/586/what-is-the-fastest-way-to-work-out-2d-bounding-box-intersection
// function IntersectRect(r1:Rectangle, r2:Rectangle):Boolean {
// return !(r2.left > r1.right
// || r2.right < r1.left
// || r2.top > r1.bottom
// || r2.bottom < r1.top);
// }
//a simple rectangle collision logic funcion
if (rect1.left < rect2.left + rect2.width &&
rect1.left + rect1.width > rect2.left &&
rect1.top < rect2.top + rect2.height &&
rect1.top + rect1.height > rect2.top)
{
el2.style.background ="#FF0006";
} else {
el2.style.background ="black"; // put original color
}
}
//function which stops the mousedown event
function mouseup() {
window.removeEventListener("mousemove", mousemove);
window.removeEventListener("mouseup", mouseup);
}
}
//CSS code
.body {
position: relative;
}
.item1{
height:50px;
width:50px;
position:absolute;
background:orange;
}
.item2{
height:120px;
width:120px;
position:absolute;
background:green;
top:300px;
left:500px;
z-index:-2;
}
//HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href = "stl.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
<script src = "js.js" type = "text/javascript"></script>
</body>
</html>
The element moves all the directions (top, right, bottom, left) including diagonally. I do not want it to move diagonally.
HTML
<body onload="move('theDiv')">
<div class="container">
<div id="theDiv" class="theDiv"></div>
</div>
</body>
Javascript
var dragValue;
function move(id) {
var element = document.getElementById("theDiv");
element.style.position = "sticky";
element.onmousedown = function() {
dragValue = element;
};
}
document.onmouseup = function(e) {
dragValue = null;
};
document.onmousemove = function(e) {
var x = e.pageX,
y = e.pageY;
dragValue.style.transform = "transltex(" + x + "px)";
dragValue.style.transform = "transltey(" + y + "px)";
};
Use lastPoint.
1. When the value of x in the current position is not equal to the value of x in the old position, that is, moving in the direction of the x-axis.
2. When the value of y of the current position is not equal to the value of y of the old position, it means moving in the direction of the y-axis.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.theDiv {
background-color: blue;
height: 100px;
width: 150px;
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body onload="move('theDiv')">
<div id="theDiv" class="theDiv"></div>
<script>
var dragValue;
var lastPoint;
function move(id) {
var element = document.getElementById("theDiv");
element.onmousedown = function(e) {
dragValue = element;
lastPoint = e;
lastPoint.pageX = lastPoint.pageX - ($('#theDiv').width() / 2);
lastPoint.pageY = lastPoint.pageY - ($('#theDiv').height() / 2);
};
}
document.onmouseup = function(e) {
dragValue = null;
lastPoint = null;
};
document.onmousemove = function(e) {
if (dragValue != null) {
var x = e.pageX - ($('#theDiv').width() / 2),
y = e.pageY - ($('#theDiv').height() / 2);
if (lastPoint.pageX == e.pageX)
dragValue.style.top = y + "px";
else
dragValue.style.left = x + "px";
lastPoint = e;
}
};
</script>
</body>
</html>
I had to change your code a bit to be able to run it. You can easily use this code or use it with your own code
Is it possible to place a draggable HTML element automatically to your mouse position if you press a key on your keyboard?
So I want to make the ball move to my mouse position by pressing a single key.
This is the HTML code for the "ball" element.
So by pointing my mouse towards the goal, then by pressing a key, then the ball moves to the goal.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/ball.svg" id="ball">
<script>
let currentDroppable = null;
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>
The event object passed to the callback of the addEventListener() method contains the coordinates of the user's click. Using absolute positioning, we can move our invBall element to the users cursor by setting the top and left style properties. The travel time is controlled by a CSS transition.
const target = document.getElementById("invBall");
document.addEventListener('click', (event) => {
target.style.top = `${event.clientY}px`;
target.style.left = `${event.clientX}px`;
})
#invBall {
position: absolute;
background-color: red;
height: 10px;
width: 10px;
transition: .3s all ease-in-out
}
<div id='invBall'>
Are you looking for something like this? (Press space)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/ball.svg" id="ball">
<script>
let currentDroppable = null;
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
ball.ondragstart = function() {
return false;
};
let x, y;
document.addEventListener('mousemove', e => {
x = e.clientX;
y = e.clientY;
});
document.addEventListener('keyup', e => {
if(e.code === 'Space') {
ball.style.position = 'absolute';
ball.style.top = `${y}px`;
ball.style.left = `${x}px`;
}
});
</script>
</body>
</html>
I'm trying to create virtual touch joystick on HTML5 canvas. I found several solutions, one really working, but it was too complicated for me to modify, so I did a lot of work on my own, but it had some issues. It doesn't support two joysticks at a time and also it's terribly slow :( Please show me the way I should go. My html code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;">
<title>Touch controller</title>
<link rel="stylesheet" href="css/virtualjoystick.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/touch.js"></script>
</head>
<body>
<div class="container" id="video">
<canvas height="977" width="1920" id="canvas"></canvas>
</div>
</body>
</html>
And touch.js is like this:
//touch control JavaScript
$(document).ready(function(){
//setup
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
resetCanvas(c);
//handlers
$("#canvas").mousedown(function(e){
if(side(e.clientX) == "left"){
if(!left.isset){
//alert("left");
left.isset = true;
left.startX = e.clientX;
left.startY = e.clientY;
left.curX = e.clientX;
left.curY = e.clientY;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(!right.isset){
//alert("left");
right.isset = true;
right.startX = e.clientX;
right.startY = e.clientY;
right.curX = e.clientX;
right.curY = e.clientY;
refreshCanvas(ctx);
}
}
});
$("#canvas").mousemove(function(e){
if(side(e.clientX) == "left"){
if(left.isset){
left.curX = e.clientX;
left.curY = e.clientY;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(right.isset){
right.curX = e.clientX;
right.curY = e.clientY;
refreshCanvas(ctx);
}
}
});
$("#canvas").mouseup(function(e){
if(side(e.clientX) == "left"){
if(left.isset){
//alert("left");
left.isset = false;
left.startX = false;
left.startY = false;
left.curX = false;
left.curY = false;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(right.isset){
//alert("left");
right.isset = false;
right.startX = false;
right.startY = false;
right.curX = false;
right.curY = false;
refreshCanvas(ctx);
}
}
});
});
var left = {isset:false};
var right = {isset:false};
function resetCanvas(c){
c.width = $(window).innerWidth();
c.height = $(window).innerHeight();
//c.scrollTo(0,0);
}
function refreshCanvas(ctx){
ctx.clearRect(0,0,1920,1080);
if(left.isset){
drawBase(ctx, left.startX, left.startY);
drawHandle(ctx, left.startX, left.startY, left.curX, left.curY);
}
if(right.isset){
drawBase(ctx, right.startX, right.startY);
drawHandle(ctx, right.startX, right.startY, right.curX, right.curY);
}
}
function drawBase(ctx, x, y){
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(x,y,40,0,2*Math.PI);
ctx.stroke();
}
function drawHandle(ctx, startX, startY, curX, curY){
//stop handle when leaving joystick
var x = curX - startX;
var y = curY - startY;
if( ( (x*x) + (y*y) ) >= (1600) ){
var f = y/x;
if(x < 0) var invert = true;
x = 0;
y = 0;
while( ( (x*x) + (y*y) ) <= (1600) ){
y = x*f;
if(invert) x--;
else x++;
}
x += startX;
y += startY;
}
else {
x = curX;
y = curY;
}
ctx.beginPath();
ctx.lineWidth = 4;
ctx.arc(x,y,20,0,2*Math.PI);
ctx.stroke();
}
function side(x){
var c = document.getElementById("canvas");
var dead = c.width/20;
var left = (c.width - dead)/2;
var right = left + dead;
if(x < left) return "left";
else if(x > right) return "right";
else return false;
}
I'm trying to do it as simple as possible, because I need it to be fast. However I wasn't successful yet. Thanks for advices
I am looking at doing the same thing but there is not a lot on the net. I found this example from a 'For Dummies' book... Virtual Joystick for Your HTML5
I know that my response is 6 years too late, but the reason you're having "performance" issues in your game's render loop is because you are attaching the movement of your joysticks to the rate in which the mousemove event is fired. This is slower than the canvas refresh rate.
Instead, you should do the following:
Detect & set when the mouse is down
In your refresh loop, do your mouse move logic based on whether
the mouse is down
Detect & unset when mouse is up