1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    2
    Vote Rating
    0
    logiclab is on a distinguished road

      0  

    Default Drag & Drop Graphic on a Graphic to Open Page

    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?

    Code:
    <!--  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.

    Code:
    <!-- 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


    Code:
    #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;
    }

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    84
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default

    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...p-with-ext-js/


  3. #3

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,565
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    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. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    84
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default

    @mschwartz... awww.

  6. #6
    Ext User
    Join Date
    Sep 2009
    Posts
    2
    Vote Rating
    0
    logiclab is on a distinguished road

      0  

    Default

    Thanks jgarcia. Great tutorial.

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    18
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default

    Quote Originally Posted by jgarcia@tdg-i.com View Post
    @mschwartz... awww.
    I shouldn't have carjacked your thread.