CBE Example - Custom Drag/Resize Event Listeners

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

Cross-Browser.com

e1
e2