icon - Dragging and dropping images into Leaflet map to create image markers?

I am using Leaflet. I need to make custom, draggable, resizable icons for the map, using custom images that are set inside a sidebar as such:

        ×
        
Actions
            

                
Défense en ligne
                
Défense en ligne prévue
                
Défense périmétrique
                
Défense périmétrique prévue
                
Action localisée indépendante
                
Action en Noria
                
Action simultanée et concertée

            
        

I know I have to use L.icons But I have no idea on how to do it with my sidebar, since it'll have about 100 images.

Answer

Using the HTML Drag and Drop API you can drag an image from the sidebar and drop it onto the map. For this you will have to bind two listener functions to the map container:

mapdiv = document.getElementById("map")

mapdiv.ondragover = function (e) {

  e.preventDefault()
  e.dataTransfer.dropEffect = "move"
}

mapdiv.ondrop = function (e) {
  e.preventDefault()
  imagePath = e.dataTransfer.getData("text/plain")
  coordinates = map.containerPointToLatLng(L.point([e.clientX,e.clientY]))
  L.marker(coordinates,{icon: L.icon({iconUrl: imagePath}),
                        draggable: true})

    .addTo(map)
}

https://jsfiddle.net/430oz1pj/197/

ondragover has to exist, but we just define the default behaviour. ondrop is the important part for your question. Luckily the drop event comes with some coordinates (clientX,clientY) that we can pass on to the Leaflet map to create a marker.

Note that this only works correctly if the whole map is visible in the viewport (browser window).

PS.: Markers don't change their size when you zoom the map. That's why I suggested an imageOverlay in the comments. Unfortunately these aren't draggable by default, but you can workaround it by binding them to draggable polygons as described in this gis.se answer.