Scratch

WindowsExplorer · 2011-10-17 17:00:14

I looked at lots of dragging examples in javascript, but I can't figure out how to set the x y post of a div. Please help!

sparks · 2011-10-17 17:14:08

have you tried the css? style = "position:relative;top:-10px;left:40px;"

This will offset the element by that many pixels from it's standard position on the page. This probably isn't what you're looking for but I've posted it in case... good luck!

ProgrammingFreak · 2011-10-17 17:30:08

Here is a example:

Code:

<html>
<head>
<title>DHTML dragging</title>
<script>
var dragging = false;
var mox = 0;
var moy = 0;
function doDrag(theEvent){
  var mouseCoords = fetchMouse(theEvent);
  var sl = gebi('dragbox').style.left;
  var st = gebi('dragbox').style.top;
  mox = sl.substr(0,sl.length - 2) - mouseCoords[0];
  moy = st.substr(0,st.length - 2) - mouseCoords[1];
  dragging = true;
}
function stopDrag(){
  dragging = false;
}
function performDrag(theEvent){
  if(dragging){
    moveDiv(theEvent);
  }
}
function moveDiv(theEvent){
  var mouseCoords = fetchMouse(theEvent);
  gebi("dragbox").style.left = mouseCoords[0] + mox;
  gebi("dragbox").style.top = mouseCoords[1] + moy;
}
function fetchMouse(theEvent) {
  var posx = 0;
  var posy = 0;
  if (!theEvent) var theEvent = window.event;
  if (theEvent.pageX || theEvent.pageY)     {
    posx = theEvent.pageX;
    posy = theEvent.pageY;
  }
  else if (theEvent.clientX || theEvent.clientY)     {
    posx = theEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = theEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  var coords = new Array();
  coords[0] = posx;
  coords[1] = posy;
  return coords;
}
function gebi(thing){
  return document.getElementById(thing);
}
</script>
</head>
<body onmousemove="performDrag(event)" onmouseup="stopDrag()">
<div id="dragbox" style="position:absolute;left:100px;top:100px;" onmousedown="doDrag(event)">Hallo there, my dear watson.</div>
</body>
</html>

though you might want to do jQuery. hmm

WindowsExplorer · 2011-10-18 10:48:18

sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?

rookwood101 · 2011-10-18 10:51:47

WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?

If top is -10px, that means the top of the div will be 10 pixels above it's usual position. if left is 20px then it will be 20 pixels to the right of it's normal position.

Hardmath123 · 2011-10-18 10:53:23

WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?

Top is Y, Left is X (in distance from the top/bottom of the document respectively). wink

Nice to see the ATs being used for more than Squeak. smile

rookwood101 · 2011-10-18 10:54:25

Hardmath123 wrote:
WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?
Top is Y, Left is X (in distance from the top/bottom of the document respectively).

Nice to see the ATs being used for more than Squeak.

I think you mean top/left

Hardmath123 · 2011-10-18 10:57:29

rookwood101 wrote:
WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?
If top is -10px, that means the top of the div will be 10 pixels above it's usual position. if left is 20px then it will be 20 pixels to the right of it's normal position.

Not the normal position, the top-left of the document.

ProgrammingFreak · 2011-10-18 11:21:09

Did my code help, WE?

rookwood101 · 2011-10-18 11:22:14

Hardmath123 wrote:
rookwood101 wrote:
WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?
If top is -10px, that means the top of the div will be 10 pixels above it's usual position. if left is 20px then it will be 20 pixels to the right of it's normal position.
Not the normal position, the top-left of the document.

in sparks' example, it's the normal position, as he set the position to relative. as opposed to using position: absolute, which would mean the top-left of the document.

LS97 · 2011-10-18 11:23:42

Hardmath123 wrote:
rookwood101 wrote:
WindowsExplorer wrote:
sparks, does your style top and left part go in X Y? (I'm not being sarcastic, just asking) and if so, is top X or Y?
If top is -10px, that means the top of the div will be 10 pixels above it's usual position. if left is 20px then it will be 20 pixels to the right of it's normal position.
Not the normal position, the top-left of the document.

It depends on whether you use relative, absolute, inline, etc...

WindowsExplorer · 2011-10-18 11:24:40

LS97 wrote:
Hardmath123 wrote:
rookwood101 wrote:

If top is -10px, that means the top of the div will be 10 pixels above it's usual position. if left is 20px then it will be 20 pixels to the right of it's normal position.
Not the normal position, the top-left of the document.
It depends on whether you use relative, absolute, inline, etc...

How would i make it so when something is clicked the div goes to your mouse (not dragging)

rookwood101 · 2011-10-18 11:42:51

Code:

<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

that'll probably work.

WindowsExplorer · 2011-10-18 11:46:06

rookwood101 wrote:

Code:

<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

that'll probably work.

its not working :\ http://plaxon.comyr.com/char1.php

rookwood101 · 2011-10-18 11:47:37

1. you put a div tag after the end body tag, 2. you didn't put in my first body tag.
although it still probably won't work, but we'll just have to see! I only knocked it up in a couple of minutes.

Last edited by rookwood101 (2011-10-18 11:48:06)

comp500 · 2011-10-18 11:49:56

Code:

<script type="text/javascript">function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  </script>
<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

try that. it fixes a few problems rookwood didnt see...

Last edited by comp500 (2011-10-18 11:51:09)

WindowsExplorer · 2011-10-18 11:56:37

comp500 wrote:

Code:

<script type="text/javascript">function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  </script>
<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

try that. it fixes a few problems rookwood didnt see...

it still doesn't work. I think its the body onclick thats not working:(

comp500 · 2011-10-18 12:01:09

Code:

<script type="text/javascript">function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  }</script>
<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY();
var tempX = 0;
var tempY = 0;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

another fix.

Hardmath123 · 2011-10-18 12:21:39

My amateur JS skills yeild:

Code:

<body onmousemove="mouseMoved(event)">
<div id="window" style="background-color:red; position: absolute; top:0; left:0;z-index:10000">
<div id="dragbar" style="background-color:blue;width:300px;">

<input type="button" value="=" onclick="drag(this)"/>
<script type="text/javascript">
function drag(it)
{
    window.m=(it.value=="=")
    if(m){it.value="X"}else{it.value="="};
}
function mouseMoved(event)
{
    if(m)
    {
        window.mX=event.clientX;
        window.mY=event.clientY;
        document.getElementById("window").style.top=mY-5;
        document.getElementById("window").style.left=mX-5;
    }
}
</script>
</div>

<!--Text here.-->
Text
<br/>
here
<!--end text-->
</div>
</body>

Click the (=) to drag it, then click (X) to stop dragging.

Last edited by Hardmath123 (2011-10-18 12:22:09)

MoreGamesNow · 2011-10-18 16:51:24

Code:

<HTML>
<HEAD>
<STYLE>
DIV.movable { position:absolute; }
</STYLE>
<SCRIPT TYPE="text/javascript">
var IE = document.all?true:false;
var MouseX = 0;
var MouseY = 0;

function getMouseXY(e)
{
    var tempX;
    var tempY;
    if (IE)
    {
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else
    {
        MouseX = e.pageX;
        MouseY = e.pageY;
    }  
    if (tempX < 0)
    {
        MouseX = 0;
    }
    if (tempY < 0)
    {
        MouseY = 0;
    }
}
function MoveDiv()
{
    document.getElementById("ID_Of_DIV").style.left=MouseX+"px";
    document.getElementById("ID_Of_DIV").style.top=MouseY+"px";
}
</SCRIPT>
</HEAD>
<BODY onMousedown="MoveDiv();" onMouseMove="getMouseXY(event)">
<DIV id="ID_Of_DIV" class="movable">Hello World!</DIV>
</BODY>
</HTML>

I've tested this (in Firefox) and it worked.

ohaiderstudios · 2011-10-18 18:59:05

WindowsExplorer wrote:

comp500 wrote:

Code:

<script type="text/javascript">function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  </script>
<body onclick="getMouseXY();">
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;} 
document.getElementById('thingthatmoves').style.left = tempX;
document.getElementById('thingthatmoves').style.top = tempY;
</script>
<div id="thingthatmoves">
</div>
</body>

try that. it fixes a few problems rookwood didnt see...

it still doesn't work. I think its the body onclick thats not working:(

Try onmousedown...

Hardmath123 · 2011-10-19 04:27:15

MoreGamesNow wrote:

Code:

<HTML>
<HEAD>
<STYLE>
DIV.movable { position:absolute; }
</STYLE>
<SCRIPT TYPE="text/javascript">
var IE = document.all?true:false;
var MouseX = 0;
var MouseY = 0;

function getMouseXY(e)
{
    var tempX;
    var tempY;
    if (IE)
    {
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else
    {
        MouseX = e.pageX;
        MouseY = e.pageY;
    }  
    if (tempX < 0)
    {
        MouseX = 0;
    }
    if (tempY < 0)
    {
        MouseY = 0;
    }
}
function MoveDiv()
{
    document.getElementById("ID_Of_DIV").style.left=MouseX+"px";
    document.getElementById("ID_Of_DIV").style.top=MouseY+"px";
}
</SCRIPT>
</HEAD>
<BODY onMousedown="MoveDiv();" onMouseMove="getMouseXY(event)">
<DIV id="ID_Of_DIV" class="movable">Hello World!</DIV>
</BODY>
</HTML>

I've tested this (in Firefox) and it worked.

Yeah, but this can't be dragged. So if you scroll down and press a button, the div will go there. Mine is draggable.

MoreGamesNow · 2011-10-19 22:17:21

Oh, sorry, I misread what you wanted.

...Time lapse...

Well, I played around with dragging but I fell back on this:

Code:

<HTML>
<HEAD>
<STYLE>
DIV.movable { position:absolute; }
</STYLE>
<SCRIPT TYPE="text/javascript">
var IE = document.all?true:false;
var MouseX = 0;
var MouseY = 0;

function getMouseXY(e)
{
    var tempX;
    var tempY;
    if (IE)
    {
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else
    {
        MouseX = e.pageX;
        MouseY = e.pageY;
    }  
    if (tempX < 0)
    {
        MouseX = 0;
    }
    if (tempY < 0)
    {
        MouseY = 0;
    }
}
var forever;
var mouse=1;
function GoToMouse()
{
    document.getElementById("ID_Of_DIV").style.top=MouseY+"px";
    document.getElementById("ID_Of_DIV").style.left=MouseX+"px";

}
</SCRIPT>
</HEAD>
<BODY onMouseMove="getMouseXY(event)">
<DIV id="ID_Of_DIV" class="movable" onClick="mouse++; if(mouse%2==0){forever=setInterval(GoToMouse,0);}else{clearInterval(forever);}">
DIV content
</DIV>
</BODY>
</HTML>

Not exactly dragging, but you click the div, it will follow your mouse until you click again. Is this good or do you want real dragging?

Scratch

archived forums

#1 2011-10-17 17:00:14

Clickerable divs!

#2 2011-10-17 17:14:08

Re: Clickerable divs!

#3 2011-10-17 17:30:08

Re: Clickerable divs!

Code:

#4 2011-10-18 10:48:18

Re: Clickerable divs!

#5 2011-10-18 10:51:47

Re: Clickerable divs!

WindowsExplorer wrote:

#6 2011-10-18 10:53:23

Re: Clickerable divs!

WindowsExplorer wrote:

#7 2011-10-18 10:54:25

Re: Clickerable divs!

Hardmath123 wrote:

WindowsExplorer wrote:

#8 2011-10-18 10:57:29

Re: Clickerable divs!

rookwood101 wrote:

WindowsExplorer wrote:

#9 2011-10-18 11:21:09

Re: Clickerable divs!

#10 2011-10-18 11:22:14

Re: Clickerable divs!

Hardmath123 wrote:

rookwood101 wrote:

WindowsExplorer wrote:

#11 2011-10-18 11:23:42

Re: Clickerable divs!

Hardmath123 wrote:

rookwood101 wrote:

WindowsExplorer wrote:

#12 2011-10-18 11:24:40

Re: Clickerable divs!

LS97 wrote:

Hardmath123 wrote:

rookwood101 wrote:

#13 2011-10-18 11:42:51

Re: Clickerable divs!

Code:

#14 2011-10-18 11:46:06

Re: Clickerable divs!

rookwood101 wrote:

Code:

#15 2011-10-18 11:47:37

Re: Clickerable divs!

#16 2011-10-18 11:49:56

Re: Clickerable divs!

Code:

#17 2011-10-18 11:56:37

Re: Clickerable divs!

comp500 wrote:

Code:

#18 2011-10-18 12:01:09

Re: Clickerable divs!

Code:

#19 2011-10-18 12:21:39

Re: Clickerable divs!

Code:

#20 2011-10-18 16:51:24

Re: Clickerable divs!

Code:

#21 2011-10-18 18:59:05

Re: Clickerable divs!

WindowsExplorer wrote:

comp500 wrote:

Code:

#22 2011-10-19 04:27:15

Re: Clickerable divs!

MoreGamesNow wrote:

Code:

#23 2011-10-19 22:17:21

Re: Clickerable divs!

Code:

Board footer