# 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!