HTML4 + JavaScript - drag & drop problem

Question

0.00/5 (No votes)

See more:

Hi! I'm working on a drag&drop code in javascript. Since I'm using html4, I can't just set a "draggable" attribute to the div, so I use mousedown and mousemove for the drag and mouseup for the drop functionality. However, something's wrong. I think it's the mousedown event handler, because I tried unsuccessfully to output the event's coordinates. I still can't figure out the exact problem, so I'd be grateful if someone more advanced than me gives a shoulder. Here's my code till now:

HTML

<!DOCTYPE html>
<html>

<script type = "txt/javascript">

var oldX;
var oldy;
var newX;
var newY;
var x;
var y;

var pressed;
pressed = 0;

function press(event){
  if(event.currentTarget.id == 'wnd'){
    pressed = 1;
    oldX = event.clientX;
    oldY = event.clientY;
  }
}

function release(event){
  pressed = 0;
}

function move(event){
  if(pressed)
    newX=event.clientX;
    newY=event.clientY;
    x = parseInt((document.getElementById('wnd').style.left).split('p'));
    y =  parseInt((document.getElementById('wnd').style.top).split('p'));
    document.getElementById('wnd').style.left = x[0] + newX - oldX + "px";
    document.getElementById('wnd').style.top = y[0] + newY - oldY + "px";

    oldX = newX;
    oldY = newy;
  }
}

document.addEventListener("mouseDown",press(event));
document.addEventListener("mouseUp",release(event));
document.addEventListener("mouseMove",move(event));

</script>

<body >
<div id="wnd" style="position:absolute;background-color:green;top:10px;left:10px;width:200px;height:150px;">
	<div style="position:relative;background-color:white;left:5px;top:25px;width:190px;height:120px;">
	Try to drag this window?</div>
</div>
</body>
</html>

Thanks!

Posted 23-Oct-13 10:42am

StoyanovZ

Updated 23-Oct-13 11:06am

v5

Add a Solution

2 solutions

Solution 2

Hi,

Why you are not using plugin for that ? Check http://www.dropzonejs.com/[^]

Best luck
-Amit

Posted 24-Oct-13 22:32pm

AmitGajjar

v2

Comments

AmitGajjar 25-Oct-13 5:16am

I am not Dhaval :)

StoyanovZ 25-Oct-13 5:34am

Oh... I didn't see that there's a Question option under every comment :D I was actually talking to Dhaval

AmitGajjar 25-Oct-13 5:38am

hmm i see. It looks like this is for first time for you :)

StoyanovZ 25-Oct-13 6:07am

Yup :D

StoyanovZ 25-Oct-13 12:53pm

Oh, and the reason I don't use a plugin is that I need this for a course project and I prefer to do it myself. I know it's possible, because I've seen it(but I haven't seen the script itself)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dhaval Patel · Accepted Answer · 2013-10-24T22:18:00

Hi,

Some changes to your and you are good to go..

XML

<!DOCTYPE html>
<html>
<head>
<script>

var oldX;
var oldy;
var newX;
var newY;
var x;
var y;

var pressed;
pressed = 0;

function press(event){
  if(event.srcElement.id == 'wnd'){
    pressed = 1;
    oldX = event.clientX;
    oldY = event.clientY;
  }
}

function release(event){
  pressed = 0;
}

function move(event){
  if(pressed)
  {
    newX=event.clientX;
    newY=event.clientY;
    x = parseInt((document.getElementById('wnd').style.left));
    y =  parseInt((document.getElementById('wnd').style.top));
    document.getElementById('wnd').style.left = x + newX - oldX + "px";
    document.getElementById('wnd').style.top = y + newY - oldY + "px";

    oldX = newX;
    oldY = newY;
  }
}

function onLoad(){
    document.addEventListener("mousedown",press);
    document.addEventListener("mouseup",release);
    document.addEventListener("mousemove",move);
}

</script>
</head>
<body onload = "onLoad();">
<div id="wnd" style="position:absolute;background-color:green;top:10px;left:10px;width:200px;height:150px;">
    <div style="position:relative;background-color:white;left:5px;top:25px;width:190px;height:120px;">
    Try to drag this window?</div>
</div>
</body>
</html>