PDA

View Full Version : Drag & Drop Graphic on a Graphic to Open Page



logiclab
22 Sep 2009, 12:39 PM
Hello folks - Not being a Javascript programmer, I am requesting help with a project I am working on. I appreciate any help you might provide.

Pulling my hair out!

Regards,
logiclab
- - -

On the page, I have
a graphic of a fez.
6 additional graphics in a row at the bottom of the page.
Each of the 6 graphics are linked to a separate page and you can click on the graphic and go to the page.

The Javascript is on the following page.
http://mrmudd.com/scripts/fez.js

"I would like to be able to drag and drop the fez over any one of the 6 graphics and open the respective page."

On the front page, I have the following code for the hat. I don't see an onmouseup or onmouseend command. Could it be that simple?



<!-- begin Fez-O-matic -->
<div id="fez" title="Mr. Mudd's Fez-O-matic"><p onmousedown="dragStart(event,'fez');"><span>FEZ</span></p></div>
<!-- end Fez-O-matic --
The 6 graphics are wrapped in the following div.



<!-- begin content -->
<div id="content">
<a id="start_content"></a>
<ul>
<li><a href="/movies/juno/">Juno</a></li>
<li><a href="/movies/artschool/">Artschool Confidential</a></li>
<li><a href="/movies/libertine/">The Libertine</a></li>
<li><a href="/movies/dancer_upstairs/">The Dancer Upstairs</a></li>
<li><a href="/movies/ghost_world/">Ghost World</a></li>
<li><a href="/movies/bunny/">How to Draw a Bunny</a></li>
</ul>
</div>
<!-- end content -->

The CSS is



#home div#content ul li a[href*="G1"] {
background-image:url(/movies/g1/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G2"] {
background-image:url(/movies/g2/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G3"] {
background-image:url(/movies/g3/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G4"] {
background-image:url(/movies/g4/images/poster-thumb.jpg);
display:block;
}

#home div#content ul li a[href*="G5"] {
background-image:url(/movies/g5/images/poster-thumb.jpg);
display:block;
}

#home div#content ul li a[href*="G6"] {
background-image:url(/movies/g6/images/poster-thumb.jpg);
display:block;
}

5 Oct 2009, 6:12 AM
Ext JS drag and drop with DOM nodes is covered on a Extjs.com blog article that i wrote:

http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

http://tdg-i.com/tmp/extjsblog/dnd_story.jpg

mschwartz
5 Oct 2009, 7:27 AM
Forgot this one:

http://www.mentalfloss.com/wp-content/uploads/2007/12/8324b9.jpeg

Animal
5 Oct 2009, 7:33 AM
Saw something like that from a distance last Friday. The cops wouldn't even let me walk my bike past because of the blood and guts and limbs everywhere. Some yuppie fool in his BMW couldn't control himself, and got intimately acquainted with a 40 ton gravel truck.

5 Oct 2009, 7:48 AM
@mschwartz... awww.

logiclab
5 Oct 2009, 11:03 AM
Thanks jgarcia. Great tutorial.

mschwartz
5 Oct 2009, 11:10 AM
@mschwartz... awww.

I shouldn't have carjacked your thread.