ExtDraggableObject Examples

This library sets up DOM elements to be draggable. Below are examples of how to use this library. For more details see the reference.

  var draggableObj = new ExtDraggableObject(document.getElementById("draggableElement"));

Zoom Slider

This advanced example makes use of ExtDraggableObjectOption and events to create a custom zoom control in place of the default.

ExtDraggableObjectOptions aren't created directly but are instead passed as an object literal as the second parameter in the ExtDraggableObject constructor:

  var zoomSlider = new ExtDraggableObject(document.getElementById("zoom"), {restrictX:true, intervalY:8, toleranceX:50, toleranceY:25, container:document.getElementById("zoomSlider")});

restrictX will prevent the slider from moving left and right, perfect for a zoom control.

intervalY will cause the object to only move the given number of pixels at a time along the y axis. In this case 8 is chosen so that the slider will snap to the dots on the zoom control.

toleranceX and toleranceY will snap the slider back to its starting position if the mouse moves the given number of pixels away from the slider. This is largely to emulate the normal behavior of scroll bars but it may have more applications as well.

Finally, container acts mostly as it did in the v2 DraggableObject. The object can't be dragged beyond the boundaries of the containing object. This isn't a perfect implementation (and neither was the v2 version). It's recommended that the container object be the parent object as well to get the best behavior.


There are a number of events exposed by ExtDraggableObject which can be seen in the reference. In our example we'll make use of dragend. This isn't the greatest example of a working control as the max zoom level is hardcoded in, but it does show the use of events:

    var dragEndEvent = google.maps.event.addListener(zoomSlider, "dragend", function() {
      var val = 19 - zoomSlider.valueY();
      if (map.getZoom() !== val) {
        map.setZoom(val);
      }
    });

valueX and valueY will return a position of the object based on the interval. This is simply the current position divided by the respective interval value. Likewise setValueX and setValueY will move the object based on the interval. Basically, value = position / interval.

Putting it all together:

  function init() {
    var zoomSlider = new ExtDraggableObject(document.getElementById("zoom"), {restrictX:true, intervalY:8, toleranceX:50, toleranceY:25, container:document.getElementById("zoomSlider")});

    var dragEndEvent = google.maps.event.addListener(zoomSlider, "dragend", function() {
      var val = 19 - zoomSlider.valueY();
      if (map.getZoom() !== val) {
        map.setZoom(val);
      }
    });
    var latlng = new google.maps.LatLng(37.313477473067, -121.880502070713);
    var map = new google.maps.Map(document.getElementById("map_canvas"), {zoom:8, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI:true});
    zoomSlider.setValueY(11);

    var centerChanged = google.maps.event.addListener(map, "center_changed", function() {
      mapZoom.setCenter(map.getCenter());
    });
    var zoomChanged = google.maps.event.addListener(map, "zoom_changed", function() {
      zoomSlider.setValueY(19 - map.getZoom());
    });

    var zoomIn = google.maps.event.addDomListener(document.getElementById("zoomIn"), "click", function() {
      map.setZoom(map.getZoom() + 1);
    });
    var zoomOut = google.maps.event.addDomListener(document.getElementById("zoomOut"), "click", function() {
      map.setZoom(map.getZoom() - 1);
    });
  }

View example