We Keep Coding

How to drag images in JS

I have a large background image and some much smaller images for the user to drag around on the background. I need this to be efficient in terms of performance, so i'm trying to avoid libraries. I'm fine with drag 'n' drop if it work's well, but im trying to get drag.
Im pretty much trying to do this. But after 8 years there must be a cleaner way to do this right?
I currently have a drag 'n' drop system that almost works, but when i drop the smaller images, they are just a little off and it's very annoying. Is there a way to fix my code, or do i need to take a whole different approach?
This is my code so far:
var draggedPoint;
function dragStart(event) {
draggedPoint = event.target; // my global var
}
function drop(event) {
event.preventDefault();
let xDiff = draggedPoint.x - event.pageX;
let yDiff = draggedPoint.y - event.pageY;
let left = draggedPoint.style.marginLeft; // get margins
let top = draggedPoint.style.marginTop;
let leftNum = Number(left.substring(0, left.length - 2)); // cut off px from the end
let topNum = Number(top.substring(0, top.length - 2));
let newLeft = leftNum - xDiff + "px" // count new margins and put px back to the end
let newTop = topNum - yDiff + "px"
draggedPoint.style.marginLeft = newLeft;
draggedPoint.style.marginTop = newTop;
}
function allowDrop(event) {
event.preventDefault();
}
let imgs = [
"https://upload.wikimedia.org/wikipedia/commons/6/67/Orange_juice_1_edit1.jpg",
"https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg",
"https://upload.wikimedia.org/wikipedia/commons/b/b4/Litoria_infrafrenata_-_Julatten.jpg"
]
/* my smaller images: */
for (let i = 0; i < 6; i++) {
let sensor = document.createElement("img");
sensor.src = imgs[i % imgs.length];
sensor.alt = i;
sensor.draggable = true;
sensor.classList.add("sensor");
sensor.style.marginLeft = `${Math.floor(Math.random() * 900)}px`
sensor.style.marginTop = `${Math.floor(Math.random() * 500)}px`
sensor.onclick = function() {
sensorClick(logs[i].id)
};
sensor.addEventListener("dragstart", dragStart, null);
let parent = document.getElementsByClassName("map")[0];
parent.appendChild(sensor);
}
<!-- my html: -->
<style>
.map {
width: 900px;
height: 500px;
align-content: center;
margin: 150px auto 150px auto;
}
.map .base {
position: absolute;
width: inherit;
height: inherit;
}
.map .sensor {
position: absolute;
width: 50px;
height: 50px;
}
</style>
<div class="map" onDrop="drop(event)" ondragover="allowDrop(event)">
<img src='https://upload.wikimedia.org/wikipedia/commons/f/f7/Plan-Oum-el-Awamid.jpg' alt="pohja" class="base" draggable="false">
<div>

With the answers from here and some time i was able to get a smooth drag and click with pure js.
Here is a JSFiddle to see it in action.
let maxLeft;
let maxTop;
const minLeft = 0;
const minTop = 0;
let timeDelta;
let imgs = [
"https://upload.wikimedia.org/wikipedia/commons/6/67/Orange_juice_1_edit1.jpg",
"https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg",
"https://upload.wikimedia.org/wikipedia/commons/b/b4/Litoria_infrafrenata_-_Julatten.jpg"
]
var originalX;
var originalY;
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
function sensorClick () {
if (Date.now() - timeDelta < 150) { // check that we didn't drag
createPopup(this);
}
}
// create a popup when we click
function createPopup(parent) {
let p = document.getElementById("popup");
if (p) {
p.parentNode.removeChild(p);
}
let popup = document.createElement("div");
popup.id = "popup";
popup.className = "popup";
popup.style.top = parent.y - 110 + "px";
popup.style.left = parent.x - 75 + "px";
let text = document.createElement("span");
text.textContent = parent.id;
popup.appendChild(text);
var map = document.getElementsByClassName("map")[0];
map.appendChild(popup);
}
// when our base is loaded
function baseOnLoad() {
var map = document.getElementsByClassName("map")[0];
let base = document.getElementsByClassName("base")[0];
maxLeft = base.width - 50;
maxTop = base.height - 50;
/* my smaller images: */
for (let i = 0; i < 6; i++) {
let sensor = document.createElement("img");
sensor.src = imgs[i % imgs.length];
sensor.alt = i;
sensor.id = i;
sensor.draggable = true;
sensor.classList.add("sensor");
sensor.classList.add("dragme");
sensor.style.left = `${Math.floor(Math.random() * 900)}px`
sensor.style.top = `${Math.floor(Math.random() * 500)}px`
sensor.onclick = sensorClick;
let parent = document.getElementsByClassName("map")[0];
parent.appendChild(sensor);
}
}
function startDrag(e) {
timeDelta = Date.now(); // get current millis
// determine event object
if (!e) var e = window.event;
// prevent default event
if(e.preventDefault) e.preventDefault();
// IE uses srcElement, others use target
targ = e.target ? e.target : e.srcElement;
originalX = targ.style.left;
originalY = targ.style.top;
// check that this is a draggable element
if (!targ.classList.contains('dragme')) return;
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// calculate integer values for top and left properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
document.onmousemove = dragDiv; // move div element
return false; // prevent default event
}
function dragDiv(e) {
if (!drag) return;
if (!e) var e = window.event;
// move div element and check for borders
let newLeft = coordX + e.clientX - offsetX;
if (newLeft < maxLeft && newLeft > minLeft) targ.style.left = newLeft + 'px'
let newTop = coordY + e.clientY - offsetY;
if (newTop < maxTop && newTop > minTop) targ.style.top = newTop + 'px'
return false; // prevent default event
}
function stopDrag() {
if (typeof drag == "undefined") return;
if (drag) {
if (Date.now() - timeDelta > 150) { // we dragged
let p = document.getElementById("popup");
if (p) {
p.parentNode.removeChild(p);
}
} else {
targ.style.left = originalX;
targ.style.top = originalY;
}
}
drag = false;
}
.map {
width: 900px;
height: 500px;
margin: 50px
position: relative;
}
.map .base {
position: absolute;
width: inherit;
height: inherit;
}
.map .sensor {
display: inline-block;
position: absolute;
width: 50px;
height: 50px;
}
.dragme {
cursor: move;
left: 0px;
top: 0px;
}
.popup {
position: absolute;
display: inline-block;
width: 200px;
height: 100px;
background-color: #9FC990;
border-radius: 10%;
}
.popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: #9FC990 transparent transparent transparent;
}
.popup span {
width: 90%;
margin: 10px;
display: inline-block;
text-align: center;
}
<div class="map" width="950px" height="500px">
<img src='https://upload.wikimedia.org/wikipedia/commons/f/f7/Plan-Oum-el-Awamid.jpg' alt="pohja" class="base" draggable="false" onload="baseOnLoad()">
<div>

make divs with an resizeable width on both sides

I have some trouble making my divs resizeable.
Im trying to make a time scheduler, but the divs should be resizeable and change width based on the resized one.
This is what I currently have now.
var stepsize = 5;
var min = 0;
var max = 1440;
var stepwidth = 100 / max;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
console.log(stepwidth);
var timeblocks = {0: [50, 100, "red"], 1: [100, 200, "blue"], 2: [200, 400, "red"]};
calcwidth(timeblocks);
function calcwidth(timeblocks){
const values = Object.values(timeblocks)
var container = document.getElementById("container");
var int = 0;
var startmargin = 0;
for (const arrayv of values) {
console.log(arrayv);
var start = 0;
var end = 0;
if(int == 0){
start = stepwidth * arrayv[0];
console.log(start);
end = stepwidth * arrayv[1] - start;
startmargin = startmargin + (start + end);
}
else{
start = startmargin;
end = stepwidth * arrayv[1] - start;
startmargin = startmargin + (end);
}
console.log(startmargin);
var timeblock = document.createElement('div');
timeblock.className = "timeblock";
timeblock.style.background = arrayv[2];
timeblock.style.marginLeft = start + "%";
timeblock.style.width = end + "%";
var moverleft = document.createElement('div');
moverleft.style.width = "5px";
moverleft.style.height = "50px";
moverleft.style.background = "black";
moverleft.style.marginLeft = "0px";
moverleft.style.position = "absolute";
moverleft.style.opacity = "0.4";
moverleft.addEventListener('mousedown', function(e) {
e.preventDefault()
original_width = timeblock.style.marginLeft;
original_x = timeblock.getBoundingClientRect().left;
original_mouse_x = e.pageX;
console.log(original_width);
moverleft.addEventListener('mousemove', resize);
moverleft.addEventListener('mouseup', stopResize);
});
var moverright = document.createElement('div');
moverright.style.width = "5px";
moverright.style.height = "50px";
moverright.style.background = "black";
moverright.style.right = "0px";
moverright.style.position = "absolute";
moverright.style.opacity = "0.4";
timeblock.appendChild(moverleft);
timeblock.appendChild(moverright);
container.appendChild(timeblock);
int++;
}
}
function resize(e) {
const width = original_width - (e.pageX - original_mouse_x)
console.log(e.target.parentElement);
e.target.parentElement.style.marginLeft = width + 'px'
}
function stopResize() {
window.removeEventListener('mousemove', resize)
}
.timeblock{
position: absolute;
height: 50px;
}
.timeblock:hover{
background: green !important;
}
#container{
width: 100%;
height: 50px;
border: 1px solid black;
}
<div class="col-xs-12">
<div class="col-xs-12" id="container">
</div>
</div>
It seems the divs don't get resized, what am I doing wrong?
I want to make all divs resizeable by their handlers and move others based on the resize.
Does someone have an example what I can use, cuz I have no clue on how to do this.
Please help me!

For Loop not working and cloning Javascript

I've tried all sorts of things to figure out why my code isn't however, I can't seem to find out why. `
var numberOfFaces = 5;
var theleftside = document.getElementById ("leftSide");
var top_position = Math.floor((Math.random() * 400) + 1);
var left_position = Math.floor((Math.random() * 400) + 1);
var theRightSide = document.getElementById("rightSide");
function generatefaces () {
for (var i = 1; i < numberOfFaces; i++) {
var img = document.createElement("img");
img.src = "smile.png";
img.style.top = top_position + "px";
img.style.left = left_position + "px";
theleftside.appendChild(img);
}
}
<style media="screen">
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 2px solid black;
}
</style>
<h1>The Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide">
</div>
<div id="rightSide">
</div>
`
I am trying to generate 5 images (smiley faces) on the lefside div at different positions, then trying to clone it to the right hand side,
I'm new with JS, so hints and tips would be much appreciated.

Because you just implemented a function but did not call it. Try adding
generatefaces();
at the end.

Two fold firstly you need to, as burkay says, call the function generatefaces().
Secondly you need to create a second element for the right side using img.cloneNode(true) this creates a duplicate so you can then append that to the right side.
Also you are generating the random position outside of the loop so the same random position is used for each img you instead need to create a random position for every img by moving it inside the loop.
Example:
var numberOfFaces = 5;
var theleftside = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
// You need to call this function
generatefaces()
function generatefaces() {
for (var i = 1; i < numberOfFaces; i++) {
// Generate the new random position for each img
var top_position = Math.floor((Math.random() * 400) + 1);
var left_position = Math.floor((Math.random() * 400) + 1);
var img = document.createElement("img");
// The location of your face image
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Emojione_1F60E.svg/64px-Emojione_1F60E.svg.png";
img.style.top = top_position + "px";
img.style.left = left_position + "px";
// Creates a duplicate version of the image
var imgright = img.cloneNode(true);
theleftside.appendChild(img);
// Appends the duplicate image to the right side
theRightSide.appendChild(imgright);
}
}
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 2px solid black;
}
<h1>The Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide">
</div>
<div id="rightSide">
</div>
Hope this helps!

update .style attributes with setInterval

I'm trying to move the position of a div element at set intervals however the setInterval method executes once and then stops. setInterval() doesn't update .style.transform repeatedly every 200 milliseconds as intended.
<!DOCTYPE html>
<html>
<head>
<title>Snake game</title>
<style type="text/css">
.container {
width: 500px;
height: 500px;
border: 2px solid black;
}
#snakehead {
width: 5px;
height: 5px;
background: pink;
position: relative;
left: 0px;
}
</style>
<script type="text/javascript" src="snake.js"></script>
</head>
<body>
<div class="container">
<div id="snakehead"></div>
</div>
</body>
</html>
Javascript: Ideally I'd also like to be able to move the snakehead in any direction with vx and vy. Anyway to put those values into .style.transform = translateX()?
function snakepos() {
var x = 0;
var y = 0;
var vx = 1;
var vy = 0;
return {
move: function() {
x += vx;
y += vy;
var snakehead = document.querySelector("#snakehead");
snakedhead.style.left = "5px";
}
};
}
window.onload = function() {
console.log("hi");
var container = document.querySelector(".container");
var snake = snakepos();
setInterval(function() {
snake.move();
}, 200);
}
I know this can be done much easier in jQuery with .css but I'd to how this can be done in vanilla javascript. Thank you in advance.

snakehead.style.left = (snakedhead.style.left + "5px");
or
snakehead.style.left = (snakedhead.style.left - "5px");

I'd recommend something in a style a bit more familiar to me:
function snakepos() {
this.x = 0;
this.y = 0;
this.vx = 1;
this.vy = 1;
this.snakehead = document.querySelector("#snakehead");
var me = this;
this.move = function() {
me.x += me.vx;
me.y += me.vy;
me.snakehead.style.top = me.y + "px";
me.snakehead.style.left = me.x + "px";
};
return this;
}
console.log("hi");
var container = document.querySelector(".container");
var snake = new snakepos();
setInterval(function() {
snake.move();
}, 200);
See fiddle: https://jsfiddle.net/theredhead/td8opb0b/1/

Not able to get the image elements in correct position

I want to achieve something like image shown below.
More specifically, I need to have smiley faces randomly distributed throughout a 500px area and have a border on the right-hand side of the area.
but with the following code I am not getting the desired result.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute
}
div {
width: 500px;
height: 500px
}
#rightSide {
position: absolute;
left: 500px;
border-left: 1px solid black
}
</style>
</head>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
var numberOfFaces = 5;
var top_position = 400;
var left_position = 400;
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function generateFaces() {
while (i < numberOfFaces) {
var this_img = document.createElement("img");
this_img.src = "#";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = top_position - 50;
left_position = left_position - 50;
i++;
}
}
</script>
</body>
</html>
The result I am getting for the above code snippet looks like
How will I make it proper?

In your while loop you subtract 50 from top and left every time, so you get even distances for each image.
Use Math.random() for random values. The function returns values between 0 and 1, so multiply with the container size to get random positions.

You just need to go with random funtion if you require random positions. For fix position you need to implement particular position checks.
top_position = Math.random()*400; left_position = Math.random()*400;
JS Fiddle - https://jsfiddle.net/manishghec/13k8caen/

If you want to use random positions:
top_position = Math.random()*400; left_position = Math.random()*400;
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
Here is the fiddle: https://jsfiddle.net/v222wgav/1/

This is how you generate random top_position locations and random left_position locations.
You should be able to modify the code below to suit your needs.
I've included a random function getRandom which is just a standard "get a random number within this range" function.
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
To use it, just provide a minimum number of pixels, and a maximum number of pixels in the range you need.
getRandom(0, 400);
var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
while(i < numberOfFaces)
{
var this_img = document.createElement("img");
this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = getRandom(0, 400);
left_position = getRandom(0, 400);
i++;
}
}
img {
position:absolute
}
div {
width:500px;height:500px
}
#rightSide {
position:absolute;
left: 0px;
top: 0px;
border-right: 1px solid black
}
<!DOCTYPE html>
<html>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
I would do away with the #rightSide div all together like so:
var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
while(i < numberOfFaces)
{
var this_img = document.createElement("img");
this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);
top_position = getRandom(0, 400);
left_position = getRandom(0, 400);
i++;
}
}
img {
position:absolute
}
div {
width:500px;height:500px
}
#leftSide {
border-right: 1px solid black
}
<!DOCTYPE html>
<html>
<body onload="generateFaces()">
<div id="leftSide"></div>
</body>
</html>
Happy Random Smilies!
Resources:
Image Credit: https://commons.wikimedia.org/wiki/File:718smiley.svg
How to use generate random numbers in a specific range