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