drag and drop function for a createElement(img)

[bjoerndalen]

Does anyone know how to solve the following???

I've got a page split into two frames.The first frame contains a drop down menu that contains images. The other frame contains an image.

The idea is that the user selects an image from the drop down menu and it then appears in the other frame. Here the image is able to be re-positioned where they want.

I can do everything but get the image to re-position. I've got some code that enables an image already available in the second frame to be moved. How do I enable the image selected via the drop down menu to utilise this same code?????

HELP!!!

Dave

[swon]

Hi Dave, for which browser should it works?

[bjoerndalen]

Hi Swon...Internet Explorer ...

[khalidali63]

Looks like you want to click an item in the list box and then in the next page you want to move the image around on the page.
If so,
Put the image in the div tag and id it;
say div id="image1" style="position:absolute;"></div>

Now there are few things you need to do.

capture evevnts for
mousemove
mousedown
mouseup

get the co-rddinates of the image on the page when mouse is down,

then get the co-rds when mouse is up.now replace the existing left and top properties with new values.

if (NS){//alert(e.pageX-X);
ob = document.layers[e.target.name]; ob.moveTo((e.pageX-X), (e.pageY-Y));
} else {//IE
ob = event.srcElement.parentElement.style;
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}

I hope it guides you to right direction

Khalid

[bjoerndalen]

Thanks for the help....I'll give it a go...

I already have some code for the drag part of the process which an image if coded straight into the page uses ok.

The image I choose from the drop down menu is created in the other frame by using the createElement() and the setAttribute(). Can I use a similiar bit of code to point to the function i've already got...

Sorry for being thick!!

Pretty new to all this.

Dave

:confused:

[khalidali63]

You should be able to do that,
At this point I'd say post your code JavaScript and html( may be in a zip file).so that some one can work on it
Khalid

[swon]

Hi Dave, could you post your drag function which you already have?
You would use this function on the create dokument?

[bjoerndalen]

Ok guys here goes....Its not very pretty but that'll come later plus its not interesting subject matter..

Hope this works!!!

Going to try and attach the files by a zip file!

:confused:

[swon]

I had a look around your script and thought it would be much easier for you to change these things:

menu.htm: rename the function eyes1() to:

function doIt(elm)
{
window.top.workspace.document.getElementById(elm).style.visibility="visible";
}


in the body:

<div id="eyesmenudiv" class="DivMenu" onmouseout="return hideMenu(this)">
<table border=0 cellspacing=1 cellpadding=1 id="eyestable">
<tr>
<td Rollover Rollout class="TDMenu"><img src="Eyes5.gif" onclick="doIt('image5')" id="eyes1"></td>
</tr>
<tr>
<TD Rollover Rollout class="TDMenu"><img src="Eyes4.gif" onclick="doIt('image4')" id="eyes2"></TD>
</tr>
<tr>
<TD Rollover Rollout class="TDMenu"><img src="Eye2.gif" onclick="doIt('image2')" id="eyes3"> </TD>
</tr>
<tr>
<TD Rollover Rollout class="TDMenu"><img src="Eye3.gif" onclick="doIt('image3')" id="eyes4"></TD>
</tr>
</table>
</div>
Note: doIt('image3') is the image below with id =image3, but sure you know that.


and on the workspace.htm you can put in all images by giving the id's, for example the 4 eyes:

<img ID="image5" ALT="window" CLASS="image" STYLE="position:absolute;LEFT:225;TOP:10;Z-INDEX:19;visibility:hidden" src="EYES5.GIF">
<img ID="image4" ALT="window" CLASS="image" STYLE="position:absolute;LEFT:225;TOP:10;Z-INDEX:19;visibility:hidden" src="EYES4.GIF">
<img ID="image3" ALT="window" CLASS="image" STYLE="position:absolute;LEFT:225;TOP:10;Z-INDEX:19;visibility:hidden" src="EYE3.GIF">
<img ID="image2" ALT="window" CLASS="image" STYLE="position:absolute;LEFT:225;TOP:10;Z-INDEX:19;visibility:hidden" src="EYE2.GIF">

that's just all!

[bjoerndalen]

Again thanks for taking time out to look at and offer a solution. I will give it a go over the next few days and let you know how I get on....

As you have probably guessed it is an assignment for a course i'm doing. They tried to tell me that it was too complicated and couldnt be done without getting to involved.

I will relish getting a fully working version just to prove them wrong.

Again thanks for everyones help especially Swon...much appreciated!!!

Best wishes

Dave:)

[bjoerndalen]

Swon sorry for taking so long to get back...

Again I must thank you for your help and I am pleased to say that I now have a fully working version.

I don't think I'll ever get my head round JavaScript...

Thanks again for all your help.

Dave

:)

[swon]

Great, but don't give it up (trying javascript)! :cool:

[bjoerndalen]

No worries....I intend to stick at it...

:D

Very impressed with the reaction and friendly assistance that you guys give...especially to someone as clueless as me :confused:

As they say ...

I'll be back;)

Cheers

Dave