pdxGray Posted October 27, 2011 Share Posted October 27, 2011 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 More sharing options...
Ingolme Posted October 27, 2011 Share Posted October 27, 2011 I don't see any obvious problems with the code you posted, can you show me a working example? Link to comment Share on other sites More sharing options...
pdxGray Posted October 28, 2011 Author Share Posted October 28, 2011 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 More sharing options...
Ingolme Posted October 28, 2011 Share Posted October 28, 2011 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 More sharing options...
pdxGray Posted October 28, 2011 Author Share Posted October 28, 2011 will keep trying. Say can you suggest how to fix box 3 not aliging next to the tow center block and under the header?Thxpdx Link to comment Share on other sites More sharing options...
pdxGray Posted October 28, 2011 Author Share Posted October 28, 2011 i was looking at this code. http://www.webtoolkit.info/javascript-drag-and-drop.html but how do I attach this method to my <div id=mvBox class=mvBox onMouseDown="mouse_down(event,'DragHandler')"onMouseUp="mouse_up()"></div> Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2011 Share Posted October 28, 2011 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 More sharing options...
pdxGray Posted October 30, 2011 Author Share Posted October 30, 2011 Thanks Fox will go & try it out. I put the css question in the css forums. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.