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

    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    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
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Forgot this one:


  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    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 - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    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.