dragging a leaflet marker image

[Bill]

Hello,

I have a short JavaScript example which displays a Leaflet map and places a marker
in the center. The marker's DOM element is made draggable. The map is not draggable.
The initial display is correct. However, when I start to drag the icon is placed at
the lower right and as I drag the mouse toward the upper left corner the icon
moves toward the center.
I put together 2 fiddles demonstrating this wierdness. Any ideas would be greatly appreciated.
Thank you.

0.7.7
 http://jsfiddle.net/h8nefssk/1/

1.0.0 beta
  http://jsfiddle.net/y4dy1Lje/

[ghybs]

Hi,

Would the marker "draggable" property as provided directly by Leaflet fit your need?
http://leafletjs.com/reference.html#marker-draggable

Demo: http://jsfiddle.net/h8nefssk/2/

If you need the dragging events, Leaflet also provides that:
http://leafletjs.com/reference.html#marker-drag

Hope this helps.

[Bill]

Thank you for the suggestions. I should have mentioned that the use case I have
requires that the marker icon be dragged out of the map area and onto another
area. I my case another frame.
I did some more research and found that to get the marker icon to go along
with the mouse one can use the following within ondragstart()
     event.dataTransfer.setDragImage(markerIcon, 0, 0);                       
The marker icon is the real DOM element (img). I tested on Firefox and Chrome.
For Chrome the following must also be done
    $(markerIcon).css("-webkit-user-drag", "element");

Thank you again.