Jump to content

Drag & Drop In Javascript. Short Simple Code Not Functionintg


pdxGray

Recommended Posts

very short code, grabbed it from the net and was trying to learn it. very simple workout page. No matter what I try I can not get box4 to fall under the box1 at the top and next to two center panels. Tried all alignments I could think of. My primary frustration is the code for dragging the red square w/the id =mvBox should work but does not. Have gone over it several times and can not find the error. I put some code to track the mouse to try & debug and alert box to make sure the ball.js script source was correctly linking up. I read the code over several times. I see no errors. Thank you in advance for any help and advice. Tried the original code and it only moved the box down and rightward.<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>Fill Shapes Example</title><script src="ball.js"></script><link rel="stylesheet" type="text/css" href="ball.css" /><script language="javascript"> var x; var y; function mouser(event){ x=event.clientX; y=event.clientY; document.getElementById('X-coord').innerHTML = x +'px'; document.getElementById('Y-coord').innerHTML = y +'px'; }</script></head><body onMouseMove="mouser(event);"><div id="wrapper"><div id="header"> </div><div id = box1>X: <span id="X-coord"></span><br><br>Y: <span id="Y-coord"></span> <script type =text/javascript> write(); </script> </div> <div id = box2>box2</div> <!-- Unless canvas size is specified default size is 300 w x 150 h --><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><div id = box3>box3</div> <div id = box4>box4</div> <div id = box5>box5</div> <div id=mvBox class=mvBox onMouseDown="mouse_down(event,'mvBox')" onMouseUp="mouse_up()"></div></div></body></html>css#wrapper{background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);margin-top:25px;margin-bottom:100px;margin-right:auto;margin-left:auto;padding: 50;}#box1{border:2px solid #000;padding:10px 40px; background: #CC3300;width:1000px;height: 150px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box2{float:left;border:2px solid #000;padding:0; background:#7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box3{top: 2000px;float:left;border:2px solid #000;padding:0; background: #7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box4{clear:both;border:2px solid #000;padding:0; background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box5{clear:both;border:2px solid #000;padding:0; background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#mvBox {background: #FF0000;border:4px solid #000;width: 100px;height: 100px;position: absolute; top: 50px; left: 150px; z-index: 5; }canvas{margin-top:10px;margin-bottom:0px;margin-right:0;margin-left:0;float:left;background-color: #c0c0c0;border: 2px solid "#ddd";border-radius: 100px;-moz-border-radius: 100px; /* Firefox 3.6 and earlier */}and lastly jsvar x;var y;var element;var being_dragged = false;//function write()//{//alert("write something");//}function mouser(event){if(event.offsetX || event.offsetY) {x=event.offsetX;y=event.offsetY;}else {x=event.pageX;y=event.pageY;}document.getElementById('X').innerHTML = x +'px';document.getElementById('Y').innerHTML = y +'px';document.getElementById('X-coord').innerHTML = x +'px';document.getElementById('Y-coord').innerHTML = y +'px';if(being_dragged == true) {document.getElementById(element).style.left = x +'px';document.getElementById(element).style.top = y +'px';}}function mouse_down(ele_name) {being_dragged = true;element = ele_name;document.getElementById(element).style.cursor = 'move';}function mouse_up() {being_dragged = false;document.getElementById(element).style.top = y +'px';document.getElementById(element).style.left = x +'px';document.getElementById(element).style.cursor = 'auto';}

Link to comment
Share on other sites

Hello Fox, thank you for replying.That is the the thing that is driving me nuts. I am a beginner but everything seems ok. triple checked the syntax. It is not working.I have not uploaded it anywhere it is on my laptop at work.Or if you can suggest a better way to drag & drop it or point me to a simple (very simple) tutorial? I just want to click on that box and drag it around then let go. later I'll get to the next problem.

Link to comment
Share on other sites

For a drag and drop script, you just need three methods: one is called when the mouse button is pressed down, one is called when the mouse button is released and the third method is called when the mouse is moved.startDrag() on mousedownstopDrag() on mouseupdrag() on mousemove In order to save processing, we'll only detect the mousemove event when we're actually dragging something. This means adding the mousemove event listener to the body when you start dragging and removing the listener when you stop dragging. In the drag method, you just detect the position of the mouse and use the coordinates to set the position of the box. Usually you subtract half the width of the box and half the height of the box xo that the cursor is right in the center of the box. You could also detect the cursor's position relative to the box when you start dragging and use those values instead.

Link to comment
Share on other sites

Remove the event attributes from your element. You don't need them.If you're using that script, just pass the element to the attach() method:

DragHandler.attach(document.getElementById("mvBox"));

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...