set margins to limit mouse movement beyond frame border

Ronze55 · Jul 20, 2004

Hi,

I have a website with four frames on it. the two frames I want to work with are the left (my left facing the screen) and the top.

I have a script which lets people drag and grop images I provide. It is possible, currenty, to drop an image behind the left and top frames and loose them (or at least until the user refreshes the page). is there a way to play with the margins of the page so that I can stop this layering effect from happening.

I move the images by placing them in layers. I am guessing this is more a frame issue than anything else.

thanks
ronze

estrellas · Jul 21, 2004

as little as i know, i'd say you're right wiht it being a fram issue more than anything else. i'm a little confused by your questioni "is there a way to play with the margins of the page so that i can stop this layering effect from happening" .. a little more description would be helpful or even a link to the site you're doing would be cool ...

honestly the only drag and drop stuff i have done has been with java. i wouldn't even begin to attempt it in html ... oh, the reason the users have to refresh the page after they drag and drop is because the site has to reload the object (in java, you can program stuff in it to automatically reload after you drag/drop so refreshing isn't an issue)

anyway i'll see what i can do with more info

cheers

If programming were as fun as cycling, then we'd need more bike mechanics.

lebisol · Jul 27, 2004

hmm maybe a "Drag layer" vs. frames?
Lookup in DW help:
[index tab]_________

"Drag Layer action"
_____________________

btw it runs on JS

All the best!

:--------------------------------------------------------------------------:

ok,ok...I did shoot the deputy but he told me he was the sheriff!
:--------------------------------------------------------------------------:

Ronze55 · Aug 7, 2004

Thanks so much for your response, I have been away but haven't forgotten about my little question and that I need to get back to you

here is the code

<HTML>
<HEAD>
<TITLE>Drag and Drop Images</TITLE>
<meta name="Keyword" content="Images">
<link href="../Body.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MainPanel" BGCOLOR="#FFFFFF" Text="#000000" Link="#0000FF" Alink="#00C000" Vlink="#FF0000"BACKGROUND="">

<div id='1' style='position:absolute;left:200;top:200;'>
<img src='../Pictures/DragAndDrop/Paris/ArcDeTriumph.jpg' name='1' height="175">
</div>

<div id='2' style='position:absolute;left:100;top:75;'>
<img src='../Pictures/DragAndDrop/Paris/BrunchAtCaliph.jpg' name='1' height="175">
</div>

<div id='3' style='position:absolute;left:500;top:150;'>
<img src='../Pictures/DragAndDrop/Paris/ChurchMaryMadeleine.jpg' name='1' height="175">
</div>

<div id='4' style='position:absolute;left:300;top:250;'>
<img src='../Pictures/DragAndDrop/Paris/cjandccBehindNotreDame.jpg' name='1' height="175">
</div>

<div id='5' style='position:absolute;left:250;top:50;'>
<img src='../Pictures/DragAndDrop/Paris/cjandccInParis.jpg' name='1' height="175">
</div>

<div id='6' style='position:absolute;left:375;top:100;'>
<img src='../Pictures/DragAndDrop/Paris/Louvre.jpg' name='1' height="175">
</div>

<div id='7' style='position:absolute;left:400;top:250;'>
<img src='../Pictures/DragAndDrop/Paris/NotreDame.jpg' name='1' height="175">
</div>

<div id='8' style='position:absolute;left:425;top:300;'>
<img src='../Pictures/DragAndDrop/Paris/NotreDameFromCaliph.jpg' name='1' height="175">
</div>

<div id='9' style='position:absolute;left:475;top:50;'>
<img src='../Pictures/DragAndDrop/Paris/TheCaliphCafe.jpg' name='1' height="175">
</div>

<script language="javascript">

Wholething = (document.all) ? 0 : 1;
var objectone;

function MouseMovement(e)
{
if (objectone) {
if (Wholething) {
objectone.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
objectone.pixelLeft = event.clientX-X + document.body.scrollLeft;
objectone.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}

document.write("<center><h1>Drag and Drop Images</h1></center>")

function MouseClickUp() {
objectone = null;
}

if (Wholething)
{
document.captureEvents(Event.mousedown | Event.mousemove | Event.mouseup);
}

function MouseClickDown(e)
{
if (Wholething) {
objectone = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
objectone = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}

document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;
</script>

</BODY>
</HTML>

Another thing, this uses divisions instead of layers, is there a way to insert the division number on mouse click so that the division being clicked is then placed on top. I am sure this requires a lot of jsp, so I totally understand if no code is available. just a starting point would do fine... if it is possible.

thanks again
ronze

lebisol · Aug 9, 2004

layer=div
<div id='9'
is already there....look at DW help I suggested...frames are to pages ass what a cheep gas is to a racing car!
All the best!

:--------------------------------------------------------------------------:

ok,ok...I did shoot the deputy but he told me he was the sheriff!
:--------------------------------------------------------------------------:

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

set margins to limit mouse movement beyond frame border

Ronze55

MIS

estrellas

Programmer

lebisol

IS-IT--Management

Ronze55

MIS

lebisol

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor