Basic Dragging

Hide  |  Show

Any CBE object can receive a drag event. Just add an event listener. The listener will receive 1 argument:

  • e: a CrossBrowserEvent object generated by a mouseMove 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.

If all you want the listener to do is this:
e.cbeCurrentTarget.moveBy(e.dx, e.dy);
then don't supply a listener at all - it will be done for you.

CBE objects also support dragStart and dragEnd events. See this example.

The following shows how easy it is to make a CBE object draggable.

  <html>
  <head>
  <style type='text/css'><!--
  .clsCBE {
    position:absolute; visibility:hidden; overflow:hidden;
    width:150px; height:150px; clip:rect(0,150px,150px,0);
    color:#ffffff; background:#0000ff; layer-background-color:#0000ff;
  }
  --></style>
  <script type='text/javascript' src='../cbe_core.js'></script>
  <script type='text/javascript' src='../cbe_event.js'></script>
  <script type='text/javascript'><!--
  function windowOnload() {
    with (document.getElementById('E1').cbe) {
      moveTo('center');
      show();
      addEventListener('drag');
    }
  }
  //--></script>
  </head>
  <body>
  <div id='E1' class='clsCBE'>E1</div>
  </body>
  </html>
E1

Drag Me!