i am trying to drag image in javascript
i know it is easily done using jQuery, but i want to make it using javascript
here is the code but it is not working
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dragImage</title>
<meta name="author" content="engy" />
<!-- Date: 2015-02-17 -->
</head>
<body>
<!--<img src="bbe.jpg" style="width:104px;height:128px">-->
<!-- <img id = "img" src="bbe.jpg" style="position:absolute; TOP:posY; LEFT:posX; WIDTH:50px; HEIGHT:50px"> -->
<!--top=y=155px;left=x=70px;-->
<script>
var flagdown = 0;
</script>
<script>
function up() {
flagdown = 0;
}
function down() {
//document.write("jk");
flagdown = 1;
}
function move(e) {
if (flagdown == 1) {
var posX = e.clientX;
var posY = e.clientY;
document.getElementById("img").style.marginLeft = posX;
document.getElementById("img").style.marginTop = posY;
}
}
document.onmousemove = move;
</script>
</body>
</html>
can anyone help me?
i have tried it in many browsers but it still doesn't work
var flagdown = 0;
function up() {
flagdown = 0;
}
function down() {
//document.write("jk");
flagdown = 1;
}
function move(e) {
if (flagdown == 1) {
var posX = e.clientX;
var posY = e.clientY;
document.getElementById("img").style.marginLeft = posX;
document.getElementById("img").style.marginTop = posY;
}
}
document.onmousemove = move;
<img onmouseup="up()" onmousedown="down()" id="img" src="bbe.jpg" draggable="true" width="50" height="50">
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
</script>
</head>
<body>
<p>Drag image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="100">
</body>
</html>
Related
I want the smaller div box to show up in the larger div.
However, when I drag and drop it, this is what it looks like:
Why isn't the small box's border properly showing in the larger box? I have modified the drop function so that it copies the 2nd div instead of dropping it.
<html>
<head>
<script>
function remove(id){
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log('Removed')
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = 'something';
ev.target.appendChild(nodeCopy);
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id = "drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px">
<span id="yo" class="fa fa-close cross" onclick="remove(this.id);"></span>
</div>
</body>
</html>
Hey #Presence as I check the thing which you are saying is working with the HTML and JS which you provided which concludes that you don't have any problem in javascript. Maybe you are facing this issue because of CSS.
You can use the CSS mentioned in the answer or else you can upload your CSS in question from which we can find out which property is giving you the issue.
function remove(id) {
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log("Removed");
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "something";
ev.target.appendChild(nodeCopy);
}
.dropDiv {
height: 15vh;
border: 2px solid grey;
}
.dragDiv {
height: 9vh;
border: 2px solid grey;
width: 53vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div class="dropDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="dragDiv" id="drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px">
<span id="yo" class="fa fa-close cross" onclick="remove(this.id);"></span>
</div>
<script src="./index.js"></script>
</body>
</html>
height="50px" width="50px" doesn't work with the div. It is specific to few tags.
You can set the styles in the following ways for div.
Add CSS styling with class. (Preferred solution)
Add In-line styling for the div, like this. style="width: 100px"
Added the code snippet for your reference.
function remove(id){
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log('Removed')
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = 'something';
ev.target.appendChild(nodeCopy);
}
.box{
border: 1px solid black;
}
.big{
width: 120px;
height: 50px;
}
.small{
width: 80px;
height: 30px;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" class="big box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" class="small box" draggable="true" ondragstart="drag(event)">
<span id="yo" class="" onclick="remove(this.id);">x</span>
</div>
I try to drag the image and drop it on the target div. However instead of dropping the image itself only the image path is displayed.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="DragAndDrop_2.css">
<script src="DragAndDrop_2.js" type="text/javascript"></script>
</head>
<body>
<img id="my-image" draggable="true" src="images/thumbUp.jpg" height="200">
<div id="target-box"> </div>
</body>
</html>
Stylesheet:
*{
margin:0px;
padding:0px;
}
#target-box {
width:600px;
height:600px;
border:1px solid black;
}
Javascript:
function initialFunction() {
picture = document.getElementById('my-image');
targetBox = document.getElementById('target-box');
picture.addEventListener('drag', drag, false);
targetBox.addEventListener('dragover', function(ev) { ev.preventDefault(); }, false);
targetBox.addEventListener('drop', drop, false);
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.outerHTML);
}
function drop(ev) {
var code = ev.dataTransfer.getData("Text");
targetBox.innerHTML = code;
}
window.addEventListener('load', initialFunction, false);
I heard about some issues with Drag and Drop operation in HTML5. I wonder if in this case it's a bug in API or perhaps I'm missing something.
I have a div which can be dragged. If it's dragged, I would like to add its text to mouse and after leaving the mouse I want to show some menu like copy.
I have tried this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#div1
{
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
//console.log(ev.dataTransfer);
//var data=ev.dataTransfer.getData("Text");
//ev.target.appendChild(document.getElementById(data));
alert(ev.target.id);
}
function allowDrop(ev){
ev.preventDefault();
}
</script>
</head>
<body>
<a draggable="true" ondragstart="drag(event)" id="drag-id" >dragme</a>
<div id="div1" style="border: solid 1px; width:40px; height:40px;" ondrop="return drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
SOLUTION using fake drag 'n drop.
The problem here is that it only works inside the body element.
var fakeDrag = {
setup: function(){
fakeDrag.el = document.createElement('span');
fakeDrag.el.style['pointer-events'] = 'none';
fakeDrag.el.style['position'] = 'absolute';
fakeDrag.el.style['display'] = 'none';
fakeDrag.el.textContent = 'dragging';
document.body.appendChild(fakeDrag.el);
},
dragging: false,
drag: function(event){
if(event.target.classList.contains('drag')){
fakeDrag.dragging = true;
fakeDrag.source = event.target;
fakeDrag.el.style['display'] = 'inline';
}
},
dragmove: function(event){
fakeDrag.el.style['top'] = ++event.clientY+'px';
fakeDrag.el.style['left'] = ++event.clientX+'px';
},
drop: function(event){
if(event.target.classList.contains('drop') && fakeDrag.dragging){
event.target.textContent = fakeDrag.source.textContent;
}
fakeDrag.dragging = false;
fakeDrag.el.style['display'] = 'none';
}
};
fakeDrag.setup();
For menu you use it:
<div id="context_menu" style="width:150px;border:1px solid black;background-color:#EEEEEE;visibility:hidden;position:absolute;line-height:30px; padding-left: 10px">
<div id="copy" onclick="CopyFunction(this)" divIDMenu="">copy</div>
<div id="paste"onclick="PasteFunction(this)" divIDCopy="" divIDMenu="">paste</div>
<div id="cut" onclick="cutFunction(this)"divIDMenu="">cut</div>
<div id="delete" onclick="deleteFunction(this)" divIDMenu="">delete</div>
<div id="reload" onclick="reloadFunction(this)" divIDMenu="">reload</div>
</div>
This question already has answers here:
HTML5 Drag and Drop anywhere on the screen
(3 answers)
Closed 9 years ago.
I am trying to code up some JavaScript that will allow me to move a div on a web page. That is, I want to make it so that you can click and drag a div from one location on the page to another. My JavaScript doesn't seem to be cooperating. However, I feel like I am making a very simple error. Perhaps another pair of eyes can find my problem(s)?
Any comments are appreciated.
Below is my JS, CSS, and HTML:
JavaScript:
function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName];
}
}
function grabCalculator(e) {
var evt = e || window.event;
calculator = evt.target || evt.srcElement;
var mousex = evt.clientX;
var mousey = evt.clientY;
diffx = parseInt(calculator.style.left) + mousex;
diffy = parseInt(calculator.style.top) + mousey;
addEvent(document, "mousemove", moveCalculator, false);
addEvent(document, "mouseup", dropCalculator, false);
}
function moveCalculator(e) {
var evt = e || window.event;
var mousex = evt.clientX;
var mousey = evt.clientY;
calculator.style.left = mousex + diffx + "px";
calculator.style.top = mousey + diffy + "px";
}
function addEvent(obj, eventType, fnName, cap) {
alert("TEST");
if (obj.attachEvent) {
obj.attachEvent("on" + eventType, fnName);
} else {
obj.addEventListener(eventType, fnName, cap);
}
}
function removeEvent(obj, eventType, fnName, cap) {
if (obj.attachEvent) {
obj.detachEvent("off" + eventType, fnName);
} else {
obj.removeEventListener(eventType, fnName, cap);
}
}
function dropCalculator(e) {
removeEvent(document, "mousemove", moveCalculator, false);
removeEvent(document, "mouseup", dropCalculator, false);
}
function init() {
diffx = null;
diffy = null;
calculator = document.getElementById("calculator");
//store top and left values of calculator
calculator.style.top = getStyle(calculator, "top");
calculator.style.left = getStyle(calculator, "left");
calcButtonState = true;
}
window.onload = init;
CSS:
#calculator
{
position: absolute;
z-index: 1;
left: 37%;
top: 25%;
border: solid;
border-color: red;
background: black;
width: 25%;
height: 45%;
}
This is only the relevant CSS.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="main">
<!--Calculator-->
<div id="calculator">
</div>
<!--End calculator-->
<header>
<div id="title">
Conversion Formulas
</div>
</header>
<nav>
</nav>
<div id="content">
<div id="dryMeasureContent">
</div>
<div id="wetMeasureContent">
</div>
<div id="distanceContent">
</div>
<div id="temperatureContent">
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
Note that my other HTML tags are in place, however, stackoverflow doesn't seem to handle HTML very well so they do not appear.
first of all, your init() function doesn't add any event listeners - this is the issue
try to add addEvent(calculator, 'mousedown', moveCalculator); after this line
calculator = document.getElementById("calculator");
i hope you understood my idea
Have you looked at the jquery library draggable http://jqueryui.com/draggable/ and droppable http://jqueryui.com/droppable/ ?
I've used these libraries with great success.
Super super easy to implement.
W3Schools has a great tutorial on drag and drop just using HTML5 and javascript.
<!DOCTYPE HTML>
<html>
<head>
<script>
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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way that repeats every 60 seconds.
Here's what I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
</script>
</head>
<body onLoad="setTimeout(update(), 0);">
<canvas id="screen1" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
update();
setInterval ( update, 60000 );
</script>
</body>
</html>
1000ms = 1 second, 60000 = 60 seconds.
Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.
(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update()
{
draw();
x = x + 5;
// For one minute, you would use 60000 instead of 100.
// 100 is so you can actually see it move.
myToggle = setTimeout(update, 100);
};
function draw()
{
var canvas = document.getElementById('screen1');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
};
function stop()
{
clearTimeout(myToggle);
};
window.onload = function()
{
document.getElementById("stop").onclick = function() { stop(); };
document.getElementById("start").onclick = function() { update(); };
update();
};
</script>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas><br/>
<input id="stop" type="button" value="Stop" /><br/>
<input id="start" type="button" value="Start" />
</body>
</html>