Drag events implemented with the X Library. I threw this together quickly... so it's probably not perfect - but it should give you some ideas :-)

var hiZ = 2;
window.onload = function()
{
  xEnableDrag('d1', myOnDragStart, myOnDrag, myOnDragEnd);
  xEnableDrag('d2', myOnDragStart, myOnDrag, myOnDragEnd);
}
function myOnDragStart(ele, mx, my)
{
  window.status = '';
  if (ele.id == 'd2') xZIndex('d2Container', hiZ++);
  else xZIndex(ele, hiZ++);
  ele.myTotalMX = 0;
  ele.myTotalMY = 0;
}
function myOnDrag(ele, mdx, mdy)
{
  if (ele.id == 'd2') {
    xMoveTo('d2Container', xLeft('d2Container') + mdx, xTop('d2Container') + mdy);
  }
  else {
    xMoveTo(ele, xLeft(ele) + mdx, xTop(ele) + mdy);
  }  
  ele.myTotalMX += mdx;
  ele.myTotalMY += mdy;
}
function myOnDragEnd(ele, mx, my)
{
  window.status =
    ele.id +
    ':  Thanks for the drag!  Total X movement: ' + ele.myTotalMX +
    ',  Total Y movement: ' + ele.myTotalMY;
}