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;
  }

---

Just curious... did you find a solution to this?

Thanks,
C

By using "scriptaculous.js" just add a function:
http://script.aculo.us

Code:

---

new Draggable('id_of_element', [options]);

---

And thats ok...

Is there a way to handle this in JQuery?

Thanks,
C

by using jquery library I think it must be:

Code:

---

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

---

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