CBE Drag Events

dragStart, drag, dragEnd

Hide All  |  Show All  |  Random Colors  |  Random Positions

In addition to the drag event, all CBE objects support dragStart and dragEnd events. This demo makes use of the dragStart, drag, and dragEnd events.

The dragStart Event

A dragStart listener will receive one argument:

• e: a CrossBrowserEvent object generated by the mouseDown event that originated the drag.

The dragStart event listener for this demo follows. The dragStartListener brings the drag object's top-level ancestor to the top z-index of all top-level containers on the page. This makes use of the DOM properties which implement a multi-way tree (I'll talk more about this in another document). This technique will be utilized for the CrossBrowserWindow object (not yet complete as of 10/3/01). The while loop walks up the tree to the current object's top-level ancestor (the node immediately below the document.cbe node), and raises it's z-index to the next highest value.

  function dragStartListener(e) {
    var p = e.cbeCurrentTarget;
    while(p.parentNode.id != cbeDocumentId) {
      p = p.parentNode;
    }
    p.zIndex(++topZ);
  }

Top

The drag Event

A drag listener will receive one argument:

• e: a CrossBrowserEvent object generated by the mouseMove event while dragging.

The following are the most important CrossBrowserEvent properties for use in a drag listener.

• cbeTarget: The CBE object to which the event was originally directed,
• cbeCurrentTarget: The CBE object whose listener is currently executing,
• eventPhase: Indicates whether this object is the direct or indirect target of the drag event,
• dx: The change in the x coordinate since the last mouseMove during this drag,
• dy: The change in the y coordinate since the last mouseMove during this drag.

This demo makes use of the default drag event listener, so one is not needed in this code. Effectively, this is what it does:

  function dragListener(e) {
    e.cbeCurrentTarget.moveBy(e.dx, e.dy);
  }

Top

The dragEnd Event

A dragEnd listener will receive one argument:

• e: a CrossBrowserEvent object generated by the mouseUp event that terminated the drag.

The dragEnd listener for this demo only does one thing. It increments a counter on each dragEnd event, then displays that number in the text field below.

  function dragEndListener(e) {
    ++dragCount;
    document.getElementById('form1').t1.value = dragCount;
  }

Top

Multiple Listeners on the Same Event

This demo illustrates an interesting feature of the new event model: Multiple listeners can be registered for the same event! For example, on this page there are 2 document.onMouseOver listeners active at the same time... that is, they receive the same event, one after the other. One of them displays mouseOver info on the status bar, and the other manages dragging.