This example demonstrates how to implement custom drag/resize event listeners. e1 and e2 are draggable and resizeable. After dragging/resizing e1 or e2, their intersection is highlighted.
var e1, e2, e3;
function windowOnload()
{
with (e1 = cbeGetElementById('e1').cbe) {
background('#000099');
resizeTo(300,50);
moveTo('se',10);
zIndex(1);
show();
addEventListener('dragStart', onDragStart, false);
addEventListener('drag', onDrag, false);
addEventListener('dragEnd', onDragEnd, false);
}
with (e2 = cbeGetElementById('e2').cbe) {
background('#990000');
resizeTo(50,300);
moveTo('se',10);
zIndex(2);
show();
addEventListener('dragStart', onDragStart, false);
addEventListener('drag', onDrag, false);
addEventListener('dragEnd', onDragEnd, false);
}
with (e3 = cbeGetElementById('e3').cbe) {
background('#cccccc');
zIndex(3);
}
onDragEnd();
}
function onDragStart(e)
{
if (
e.offsetX > (e.cbeCurrentTarget.width() - 20)
&&
e.offsetY > (e.cbeCurrentTarget.height() - 20)
) {
e.cbeCurrentTarget.isResizing = true;
}
else e.cbeCurrentTarget.isResizing = false;
}
function onDrag(e)
{
if (e.cbeCurrentTarget.isResizing) {
e.cbeCurrentTarget.resizeBy(e.dx, e.dy);
}
else {
e.cbeCurrentTarget.moveBy(e.dx, e.dy);
}
}
function onDragEnd(e)
{
var o = new Object();
if (intersection(e1, e2, o)) {
// e1.hide();
e3.resizeTo(o.w, o.h);
e3.moveTo(o.x, o.y);
e3.show();
}
else {
// e1.show();
e3.hide();
}
}
function intersection(e1, e2, o)
{
var ix1, iy2, iw, ih, intersect = true;
var e1x1 = e1.pageX();
var e1x2 = e1x1 + e1.width();
var e1y1 = e1.pageY();
var e1y2 = e1y1 + e1.height();
var e2x1 = e2.pageX();
var e2x2 = e2x1 + e2.width();
var e2y1 = e2.pageY();
var e2y2 = e2y1 + e2.height();
// horizontal
if (e1x1 <= e2x1) {
ix1 = e2x1;
if (e1x2 < e2x1) intersect = false;
else iw = Math.min(e1x2, e2x2) - e2x1;
}
else {
ix1 = e1x1;
if (e2x2 < e1x1) intersect = false;
else iw = Math.min(e1x2, e2x2) - e1x1;
}
// vertical
if (e1y2 >= e2y2) {
iy2 = e2y2;
if (e1y1 > e2y2) intersect = false;
else ih = e2y2 - Math.max(e1y1, e2y1);
}
else {
iy2 = e1y2;
if (e2y1 > e1y2) intersect = false;
else ih = e1y2 - Math.max(e1y1, e2y1);
}
// return intersected rectangle
if (intersect && arguments.length == 3) {
o.x = ix1;
o.y = iy2 - ih;
o.w = iw;
o.h = ih;
}
return intersect;
}