How can I dynamically set the top position

Posted: edited May 19 at 11:30 - Source : stackoverflow

How can I dynamically set the top position of the sortable drag area of each dragged element

js

$( "#editorDesignView" ).droppable({
        accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><div class="option_toolbar"><div class="draggable-area dr-toolbar">Drag</div></div><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>';
  $(html).appendTo(this).hide().slideDown();

      }
    });
  $('#editorDesignView').sortable({
    handle: ".draggable-area",
  });

CSS

#editorDesignView:hover .option_toolbar {
    display: block;
    z-index: 10;
    position: fixed;
     left: 68%; 
    top: 1;
}

For more info please visit on my jsfiddle