...

View Full Version : Help! JS drag and drop/window.open



jvangerven
03-26-2012, 11:25 PM
Hello,

I have this site where I can put clothes on a lady, a skirt=makeMeDraggable,
pants=makeMeDraggable1,
shirt=makeMeDraggable2,
sweater=makeMeDraggable3,
the lady=makeMeDroppable.

Now, when I put the skirt on the lady, I want it to go to another window, where I can see info about the skirt.(skirt.html) And when I put the pants on the lady, I want it to go to another window where I can see info about the pants.(pants.html) Etc.

I'm so far that I can drag and drop my clothes, but it always goes to the same window, the "skirt.html" , what do I need to add or change, that the right clothing will go to the right window?

Many thanks in advance!


This is the javascript I have..


[CODE]

<script type="text/javascript">

$( init );

function init() {
$('#makeMeDraggable').draggable();
$('#makeMeDraggable1').draggable();
$('#makeMeDraggable2').draggable();
$('#makeMeDraggable3').draggable();
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}

function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
window.open( 'skirt.html', '_self' );

}

</script>

[CODE]

devnull69
03-27-2012, 09:10 AM
You need to find out which element has been dropped. This is exactly what ui.draggable is for. If you extract the id attribute of ui.draggable you'll know which element has been dragged.


function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
var dest = "";
switch(draggable.attr("id")) {
case "makeMeDraggable" : dest = "skirt"; break;
case "makeMeDraggable1" : dest = "pants"; break;
case "makeMeDraggable2" : dest = "shirt"; break;
case "makeMeDraggable3" : dest = "sweater"; break;
default: dest = "skirt";
}
window.open( dest + '.html', '_self' );

jvangerven
03-27-2012, 09:43 AM
Thank you so much!!!

I've been thinking about how to solf this for weeks..
And now it finally works.. I'm a happy person now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum