So far I start with one image, and I can drag it to a box and drop it, and it works fine. But I have a button that generates more images and when I drop them on the same thing the original worked with, they do not drop there.
My code:
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = "drag(event)";
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
Any help would be appreciated! I would like to just be able to make as many new images as I want and be able to drop them into the box!
The ongragstart function on your node need to be point the function like this 'newImg.ondragstart = drag;' with the name of the function, not like this 'newImg.ondragstart = "drag(event)";'
The new code look like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Test</title>
<style>
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
</style>
<script>
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = drag;
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
</script>
</head>
<body>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
</div>
</body>
</html>
The problem is in the line newImg.ondragstart = "drag(event)"; according to https://www.w3schools.com/jsref/event_ondragstart.asp the format should be newImg.ondragstart = function(){drag(event)};. It seems to work...
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Test</title>
<style>
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
</style>
<script>
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = function(){drag(event)};
//newImg.ondragstart = "drag(event)";
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
</script>
</head>
<body>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
</div>
</body>
</html>
Related
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
if (event.dataTransfer.getData("text") == "drag1") {
document.getElementById("demo").innerHTML = "drag1 moving";
document.getElementById("rectangle2").ondrop = "return false();";
document.getElementById("rectangle2").disabled = true;
}
if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
if (event.dataTransfer.getData("text") == "drag1") document.getElementById("demo").innerHTML = "Drag1 moved";
if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "Drag2 moved";
}
.rectangle1 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid red;
}
.rectangle2 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid blue;
}
.rectangle3 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid green;
}
.rectangle4 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid purple;
}
<p>Drag the p element back and forth between the rectangles:</p>
<table>
<tr>
<td>
<div class="rectangle1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle2" id="rectangle2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>
<div class="rectangle3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>
<p class="drag1" name="drag1" id="drag1" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 1</p>
<p class="drag2" name="drag2" id="drag2" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 2</p>
<p id="demo"></p>
I don't know why this is happening. I am testing a small interface to learn how to disable certain drop places. I need to be able to enable/disable drop places according to the object being moved. Object A can be dropped on place 1 and place 2 only, object B can be dropped on place 3 and place 4 only.
I copy the whole code at the bottom so anyone can see there is absolutely no mention of hugedomains-dot-com in it. And you never know, it might be useful for someone. The relevant function is this one:
function dragging(event) {
if (event.dataTransfer.getData("text") == "drag1") {
document.getElementById("demo").innerHTML = "drag1 moving";
document.getElementById("rectangle2").ondrop = "return false();";
document.getElementById("rectangle2").disabled = true;
}
if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}
I'm just trying stuff, trying to find the proper syntax.
When I tested this code, I got redirected to hugedomains-dot-com. And worse, I was offered to buy the domain "drag1-dot-com", the name of my object!!! I first thought there was something wrong with the browser. I reintalled it with :
sudo apt remove --purge firefox
sudo apt install firefox
No change. I installed an add-on called "Block Site". Now I get redirected to a page saying hugedomains-dot-com is blocked.
I don't want to be redirected at all, I just want my "drag1" object to go back to it's original place if it's dropped over the wrong place (called "rectangle2").
Why on Earth is this happening? How can I stop it? Please help.
The rest of this post is the complete code of the html page, probably uninteresting for most readers.
<!DOCTYPE HTML>
<html>
<head>
<style>
.rectangle1 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid red;
}
.rectangle2 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid blue;
}
.rectangle3 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid green;
}
.rectangle4 {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid purple;
}
</style>
</head>
<body>
<p>Drag the p element back and forth between the rectangles:</p>
<table>
<tr>
<td>
<div class="rectangle1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle2" id="rectangle2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>
<div class="rectangle3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>
<p class = "drag1" name = "drag1" id = "drag1" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 1</p>
<p class = "drag2" name = "drag2" id = "drag2" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 2</p>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
if (event.dataTransfer.getData("text") == "drag1") {
document.getElementById("demo").innerHTML = "drag1 moving";
document.getElementById("rectangle2").ondrop = "return false();";
document.getElementById("rectangle2").disabled = true;
}
if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
if (event.dataTransfer.getData("text") == "drag1") document.getElementById("demo").innerHTML = "Drag1 moved";
if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "Drag2 moved";
}
</script>
</body>
</html>
The way to stop the drop was to use ondragover.
if (event.dataTransfer.getData("text") == "drag1") {
document.getElementById("rectangle2").ondragover = "return false;"
document.getElementById("rectangle4").ondragover = "return false;"
}
Like this there is no redirect. "drag1" can be dropped into "rectangle1 and "rectangle2" but not in the other rectangles. If the user tries, it slides back to it's original position.
The problem now is that it disables droping in these rectangles permanently. I have to find out how to re-enable dropping into them "drag2". But this is another question.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
if (ev.target.id === "div1") {
console.log("Running Stop Drop");
document.getElementById("img1").setAttribute("draggable", false);
}
}
// shuffle
function shuffle() {
var container = document.getElementById("images");
var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('grid-item'));
elementsArray.forEach(function (element) {
container.removeChild(element);
})
shuffleArray(elementsArray);
elementsArray.forEach(function (element) {
container.appendChild(element);
})
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
body {
background:#6b6b69;
color:white;
}
.info {
position:relative;
font-family:Arial;
margin:10px;
text-align:center;
border-radius:5px;
font-size:15px;
}
#title {
font-size:20px;
}
#rest2 {
font-size:13px;
}
#text div {
position:relative;
height: 200px;
width: 200px;
border: 1px dashed gray;
display: inline-block;
margin: 0;
}
#text {
display: grid;
grid-template-columns: auto auto;
width: 0%;
}
#images { display: grid;
grid-template-columns: auto auto;
width: 0%
}
img {
border: #6b6b69 2px solid;
height: 200px;
width: 200px;
}
#drag4,
#drag5,
#drag6,
#drag7,
#drag8,
#drag9,
#drag10,
#drag11,
#drag12 {
height: 200px;
width: 200px;
display: inline-block;
}
#drag4 {
background: linear-gradient(to bottom right, orange, orange, yellow);
}
#drag5 {
background: linear-gradient(to right, red, orange);
}
#drag6 {
background: linear-gradient(red, orange);
}
#drag7 {
background: linear-gradient(to bottom right, red, red, orange);
}
#drag8 {
background:yellow;
}
#drag9 {
background: linear-gradient(orange, yellow);
}
#drag10 {
background: linear-gradient(to right, orange, yellow);
}
#drag11 {
background: linear-gradient(red, orange);
}
#drag12 {
background: linear-gradient(to right, red,orange);
}
.puzzle{display: inline-block;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="info">
<div id="title">PUZZLE</div>
<div id="rest">Drag and drop the colored pieces on the puzzle below. (better images are on their way) </div>
<div id="rest2">You can put multiple pieces in the same area but you can't interchange them, only the last one you
put will be accessible.</div>
</div>
<div class="puzzle">
<div style="float:left;" id="images">
<img class="grid-item" id="img1" src="img/puzz1.jpg" alt="" draggable="true" ondragstart="drag(event)">
<img class="grid-item" id="img2" src="img/puzz2.jpg" alt="" draggable="true" ondragstart="drag(event)">
<img class="grid-item" id="img3" src="img/puzz3.jpg" alt="" draggable="true" ondragstart="drag(event)">
<img class="grid-item" id="img4" src="img/puzz4.jpg" alt="" draggable="true" ondragstart="drag(event)">
</div>
<div style="float: right" id="text">
<div class="grid-item2" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="grid-item2" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="grid-item2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="grid-item2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div><br><br>
<button onclick="shuffle()">
START
</button>
<div class="info">
<p>Congratulations if you finished!<p>
</div>
<script src="dragdrop3.js"></script>
</body>
</html>
I am building kind of a puzzle game with a drag and drop elements, I have 4 draggable images on the left and 4 empty divs on the right, similar drag and drop event to this w3Shchool example I posted here.
My question is how to prevent image to leave div2 on the right once it is dropped inside? I want it to be permanent, not draggable just locked once is dropped.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Here is a very crude way of doing it (IMO), but it works.
Explanation: ondrop complete I make the img element un-dropable.
document.getElementById("drag1").setAttribute("draggable", false);
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
if(ev.target.id === "div2"){
console.log("Running Stop Drop");
document.getElementById("drag1").setAttribute("draggable", false);
}
}
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
I have a div named meniucolaj where I store some images and I want to drag and drop some of them into each canvas drawn in the div conturcanvas to make a photo collage.
To test the code, I only make the first photo to be dragged and the first canvas as drop location. I resized the images to be included in the gallery, but when i drop them into the canvas, i want them to be shown at bigger size into the canvas but i want to choose which part of the picture to be shown into the canvas. You know, as you got the opportunity to choose when making a collage, but the picture is not shown when dragging into the canvas. Can you help me?
Thank you in advance! I'm a beginner here.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photo Editor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
<link rel="stylesheet" type="text/css" href="testcollage2css.css">
</head>
<body> <!--continutul care va fi afisat pentru utilizatori-->
<!--atasare fisier video pentru background-->
<video autoplay muted loop id="bkgvideo">
<source src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\bkgcity.mp4" type="video/mp4">
</video>
<div class="header">
<nav class="navigation">
<div class="totalnavigheader">
<div class="navheader">
<img id="logo" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\logocollage.png" alt="Logo cannot be displayed">
</div>
<div class="title">
<a id="name" href="#">Photo Collage</a>
</div>
</div>
</nav>
</div>
<div class="clasameniuri" id="meniuri">
<div class="meniucolaj" id="meniupoze">
<h4 id="titluimagini">Imagini</h4>
<ul class="listaimg" id="tabelimg">
<li class="elemimagini"><img class="imagini" id="dragelem" draggable="true" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\dog1.jpg"></li>
<li class="elemimagini"><img class="imagini" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\cat1.jpg"></li>
</ul>
</div>
</div>
<div class="containercolaj">
<div id="conturcanvas">
<canvas id="first"></canvas>
<canvas id="second"></canvas>
<canvas id="third"></canvas>
<script>
var canvas1 = document.getElementById("first");
var context1 = canvas1.getContext("2d");
<!--context.rect(1,0,296,100);
<!--context.stroke();-->
var canvas2 = document.getElementById("second");
var context2 = canvas1.getContext("2d");
var canvas3 = document.getElementById("third");
var context3 = canvas1.getContext("2d");
</script>
</div>
</div>
<script type="text/javascript" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\testcollage2js.js"></script>
</body>
</html>
CSS:
/*stilizare background*/
body {
background: #1A2D4B;
position: relative;
color: black;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
overflow-x: hidden;
}
/*stilizare fisier video ca si background*/
#bkgvideo {
position: fixed;
right: 0;
bottom: 0;
left:0;
top:0;
min-width: 100%;
min-height: 100%;
}
.header {
position: relative;
left: 0;
right: 0;
top: 0;
z-index: 1002;
background-color: rgba(42, 59, 85, 0.6);
height: 80px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
.totalnavigheader > * {
display:inline-block;
}
#logo {
height: auto;
width: 60px;
vertical-align: middle;
margin-left:30px;
}
.title {
padding-left:10px;
padding-bottom:40px;
margin-left:10px;
}
#name {
text-decoration:none;
color:white;
}
.clasameniuri {
position:relative;
background-color: rgba(253, 242, 233, 0.8);
float:left;
width: 382px;
margin-top:8px;
margin-right:6px;
margin-left:5px;
height:560px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
#titluimagini {
color:rgb(56, 110, 147);
text-align:center;
}
.listaimg{
list-style-type:none;
}
.elemimagini{
margin:1px;
display:inline;
}
.imagini{
width:100px;
height:100px;
border:2px solid #000;
}
.containercolaj {
position:relative;
background-color:rgba(93, 109, 126,0.8);
float:right;
margin-top:8px;
margin-right:10px;
width:920px;
height:560px;
box-shadow:5px 10px 18px #888888;
border-radius: 10px;
}
#conturcanvas
{
width:490px;
height:490px;
border:2px solid #d3d3d3;
margin-top:20px;
margin-left:215px;
padding:20px;
background-color:gray;
}
#first{
border:1px solid #d3d3d3;
width:232px;
height:485px;
float:left;
}
#second{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
margin-bottom:13px;
}
#third{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
}
#first > .imagini{
width:100%;
height:100%;
}
JS:
var dragItem = document.getElementById("dragelem");
var dropCanvas = document.getElementById("first");
dragItem.ondragstart = function(evt) { //aceasta functie se apeleaza cand userul incearca sa mute elementul prin drag
//evt.dataTransfer.setData('key', 'dragelem');
evt.dataTransfer.setData('key', evt.target.id);
console.log("its dragging...");
}
dropCanvas.ondragover = function(evt) { //aceasta functie se apeleaza cand un element este adus catre o locatie valida de drop
evt.preventDefault();
console.log("its dragover..");
}
dropCanvas.ondrop = function(evt){ //aceasta functie se apeleaza cand se lasa prin drop in locatia valida elementul adus prin drag
var dropItem = evt.dataTransfer.getData('key');
evt.preventDefault();
console.log("its dropped..");
console.log(dropItem);
var myElement=document.getElementById(dropItem);
console.log(myElement);
var myNewElem = document.createElement('img'); // create a new image element
myNewElem.src = myElement.src;
dropCanvas.appendChild(myNewElem);
}
I suppose that dataTransfer not working..
That is not the correct way to draw an image on a canvas.
You need to get its CanvasRenderingContext2D:
context = dropCanvas.getContext("2d");
Then draw the image by calling
context.drawImage(myNewElem, x, y, more, arguments, here);
You can read about all the arguments drawImage can take here:
https://www.w3schools.com/tags/canvas_drawimage.asp
how can I move the ball randomly when I click the mouse with addEventListener
I tried this code but the picture didn't move . what is wrong with this code?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="work.js"></script>
<link type="text/css" rel="stylesheet" href="work.css">
</head>
<body>
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall">
</div>
</body>
</html>
javascript code
var ball = document.querySelector('.moveBall');
function bbb(){
var ball = document.querySelector('.moveBall');
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
this is my css code:
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
position:absolute;
top: 0px;
left: 0px;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
add style position:absolute to the ball
(function() {
function bbb(){
var ball = document.querySelector('.moveBall');
console.log(ball);
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
})();
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
width:40px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
border-radius:50%;
border:1px solid red;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
}
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall">
</div>
I am trying to create a simple vote/poll program with javascript, I have tried to run it on xammp to see if it needed to be executed on a web server with no success. Do I need to include any script js files apart from vote.js like jquery or something? I am not sure.
Can someone help Thanks.
html
<!DOCTYPE html>
<html>
<head>
<title>Vote</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vote.js"></script>
</head>
<body>
<div class="content">
<h3 class="title">Who's better ?</h3>
<ul>
<li class="option" id="option_1">
Messi
<p class="score" id="score_1">0</p>
<div class="progressbar">
</div>
</li>
<li class="option" id="option_2">
Ronaldo
<p class="score" id="score_2">0</p>
<div class="progressbar">
</div>
</li>
</ul>
</div>
</body>
</html>
css
.content {
background-color: #5C5C5C;
height: 500px;
width: 600px;
font-family: CorpidRegular,Arial,Helvetica,sans-serif;
color: #fff;
font-weight: normal;
font-size: 1.5rem;
}
.progressbar_1 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}
.progressbar_2 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}
h3{
text-align: center;
padding: 40px;
margin: 0px;
font-weight: normal;
}
ul{
list-style-type: none;
display: inline;
padding: 0px;
}
.option:first-child {
background: blue;
}
.option {
background: black;
}
li{
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
cursor: pointer;
}
li:hover {
color: yellow;
}
js
var totalVotes = 0;
$('.option').click(function() {
var $this = $(this);
// store voting value in data-voting
if (!$this.data('voting'))
$this.data('voting', 0);
var voting = parseInt($this.data('voting'), 10);
voting++;
totalVotes++;
$this.data('voting', voting);
updateProgressBars();
});
function updateProgressBars()
{
$('.option').each(function()
{
var $this = $(this);
var voting = parseInt($(this).data('voting'), 10);
var pct = Math.round((voting / totalVotes) * 100);
if (isNaN(voting)) voting = 0;
if (isNaN(pct)) pct = 0;
$this.find('progressbar').progressbar({value: pct});
$this.find('.score').html(voting + ' of ' + totalVotes + ' (' + pct + '%)');
});
}
You only close html tag, didin't open tag