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