JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css">
<ul>
    <li class="ui-state-default draggable"><a href="#">North Right</a></li>
</ul>


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

CSS

body {
    font-size:12px;
}

#map {
    position:relative;
    width:200px;
    height:150px;
    border:1px dashed grey;
}

JavaScript

$('a').click(function() {
    return false;
});

$('.draggable').draggable({
    cursor: 'move',
    cursorAt: { top: 0, left: 0 },
    helper: function(event) {
        return $('<img src="http://liljaonline.se/img/pin.png"/>');
    }
});

$('.droppable').droppable({
    accept: '.draggable',
    drop: function(event, ui) {
       var newPin = $(ui.helper).clone(false)
           .removeClass('ui-draggable-dragging')
           .css({position:'absolute', left:event.layerX, top:event.layerY});  
       $(this).append(newPin);
    }
});