www.webdeveloper.com
Results 1 to 6 of 6

Thread: Drag and drop animation

Hybrid View

  1. #1
    Join Date
    Oct 2008
    Location
    Beautiful BC
    Posts
    14

    Drag and drop animation

    I have a group of images on a page that are part of a drag and drop javascript.

    What I want to know is if there is a way to gather the images once a button is clicked and have them move across the page.

    HTML
    Code:
          <div id="pizza">
            <img id="drag1" src="crust.gif" alt="" style="position:relative; left:15px; top:20px;" />       
            <img id="drag2" src="cheese.gif" alt="" style="position:relative; left:-30px; top:100px;" />
            <img id="drag3" src="pepperoni.gif" alt="" style="position:relative; left:-130px; top:-100x;" />
            <img id="drag4" src="pineapple.gif" alt="" style="position:relative; left:-125px; top:0px;" />
            <img id="drag5" src="mushroom.gif" alt="" style="position:relative; left:-125px; top:-30px;" />
            <img id="drag6" src="peppers.gif" alt="" style="position:relative; left:-225px; top:80px;" />
            <br /><a href="scripthere">All done!</a>
          </div>
    Javascript
    Code:
    //drag and drop script
    var selectedItem;
    var mouseX, mouseY;
    var selectedX, selectedY;
      
      function move(evt)
      {
       var evt = (evt) ? evt : ((window.event) ? event : null);
       var objId = getObjId(evt);
       if (!objId) return;
    
       if (objId.indexOf('drag')!=-1 || objId.indexOf('smiley')!=-1)
       {
         selectedItem = document.getElementById(objId);
      
         if (selectedItem) 
         { 
          selectedItem.style.zIndex = 100;
          selectedX = parseInt(selectedItem.style.left);
          selectedY = parseInt(selectedItem.style.top);
         }
       
         mouseX = evt.clientX;
         mouseY = evt.clientY;
       
         document.onmousemove=drag;
         return false;
       }
      }
     
      function drag(evt)
      {
       var evt = (evt) ? evt : ((window.event) ? event : null); 
       if (selectedItem)
       {
         selectedItem.style.left = (selectedX + (evt.clientX - mouseX)) + "px";
         selectedItem.style.top = (selectedY + (evt.clientY - mouseY)) + "px";
         return false;
       }
      }
      
      function drop()
      {
       if (selectedItem)
       {  
         selectedItem.style.zIndex = 0;
         selectedItem = null;
         return false;
       }
      }
      
      function getObjId(evt) 
      {
       var objId;
       var targ;
       
       if (evt.target) // Firefox
         targ = evt.target;
       else if (evt.srcElement) // IE 
         targ = evt.srcElement;
       
       if (targ.nodeType == 3) // defeat Safari bug
         targ = targ.parentNode;
    
       if (targ) 
         objId = targ.id;
       else 
         objId = evt.id;
       
       return objId;
      }

  2. #2
    Join Date
    Jan 2009
    Location
    MT
    Posts
    22
    Just curious... did you find a solution to this?

    Thanks,
    C

  3. #3
    Join Date
    Jan 2009
    Location
    Tajikistan
    Posts
    73
    By using "scriptaculous.js" just add a function:
    http://script.aculo.us

    Code:
    new Draggable('id_of_element', [options]);
    And thats ok...

  4. #4
    Join Date
    Jan 2009
    Location
    MT
    Posts
    22
    Is there a way to handle this in JQuery?

    Thanks,
    C

  5. #5
    Join Date
    Jan 2009
    Location
    Tajikistan
    Posts
    73
    by using jquery library I think it must be:

    Code:
    $("#id_of_element").draggable();

  6. #6
    Join Date
    Jan 2009
    Location
    MT
    Posts
    22
    I know that you can make something dragabble, but scriptaculous allows for animated dragging.

    Here's what I would like to do. I would like to have a trash can at the bottom of the page. Then, have a div that I can drag to the trash can (this does NOT need to be animated). But, when it's dropped into the trash can, it will show an animation of the div being moved from the DIVS original location to the trash can. It would be very similar to scriptaculous's version of animation but in the reverse. Scriptaculous's version animates the div from the place you dragged the div back to the original location.

    Does this make sense?

    Thanks for your responses!
    C

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles