My goal is to make Zoom Control movable in a leaflet map. For this I tested this code.

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>Creating Draggable DOM Elements</title>
  <link rel="stylesheet" href="../leaflet/leaflet.css" />
  <script src="../leaflet/leaflet.js"></script>
    #map {
      height: 700px;
      width: 700px;
      border: solid 1px black;

  <div id="map"></div>


    var map = L.map('map', {
      center: [50.3271, 7.0381],
      zoom: 5

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

    var attribution = document.getElementsByClassName('leaflet-control-attribution')[0];
    var draggableAttribution = new L.Draggable(attribution);

    var zoom = document.getElementsByClassName('leaflet-control-zoom')[0];
    var draggableZoom = new L.Draggable(zoom);





This one does not work for the zoom control.

I tested that later for attribution. Dragging works here.

What am I doing wrong with the zoom control?

  • 1
    You are doing nothing wrong, this is simply not possible with zoom control. It captures all mouse events and stops their propagation. If you would want to achieve that, you would have to significantly modify (extend) event handling in zoom control. – TomazicM Nov 28 at 19:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.