Cross-Browser.comDrag-Out Demo 
Home

CBE Drag-Out Demo

Simulate dragging an element out of its container.
var dragger, container, picCount=3;
function windowOnload() {
  var i, picY=0, pic;
  cbeNewImage("pic1", "../../images/browser_icons.gif");
  cbeNewImage("pic2", "../../images/mars.gif");
  cbeNewImage("pic3", "../../images/moon.gif");
  with (dragger = cbeGetElementById("idDragger").cbe) {
    resizeTo(50,50);
    moveTo('n',0,true);
    show();
  }
  with (container = cbeGetElementById("idPicContainer").cbe) {
    background("#8080ff");
    resizeTo(75,300);
    moveTo('w',10);
    show();
    addEventListener("dragStart", dragStartListener, false);
    addEventListener("drag", dragListener, false);
    addEventListener("dragEnd", dragEndListener, false);
  }
  for (i=1; i<=picCount; ++i) {
    with (pic = cbeGetElementById("idImg"+i).cbe) {
      resizeTo(50,50);
      moveTo(0,picY+10);
      moveTo("cenh");
      show();
    }
    pic.imgNum = i;
    picY += 60;
  }
}

function dragStartListener(e) {
  if (!e.cbeTarget.imgNum) return;
  cbeSetImage("dragger", "pic"+e.cbeTarget.imgNum);
  dragger.moveTo(e.cbeTarget.pageX(), e.cbeTarget.pageY());
  e.cbeTarget.hide();
  dragger.imgNum = e.cbeTarget.imgNum
}

function dragListener(e) {
  if (!e.cbeTarget.imgNum) return;
  dragger.moveBy(e.dx, e.dy);
}

function dragEndListener(e) {
  if (!e.cbeTarget.imgNum) return;
  cbeGetElementById("idImg"+dragger.imgNum).cbe.show();
  dragger.moveTo('n',0,true);
}