Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help! JS drag and drop/window.open

    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]

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.
    Code:
    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' );

  • Users who have thanked devnull69 for this post:

    jvangerven (03-27-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    thanks!

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •