JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<ul class="trees">
    <ul>
        <ul id="tree">
            <li id="1">test1</li>
            <li id="2">test2</li>
            <li id="3">test3</li>
            <li id="4">test4</li>
            <li id="5">test5</li>
            <li id="6">test6</li>
            <li id="7">test7</li>
        </ul>
<span id="result"></span>

CSS

#tree {
    float:left;
}
#tree li {
    height:30px;
    color:red;
    background-color:black;
    margin-bottom: 3px;
    width: 60px;
    cursor:pointer;
}
.trees {
    height:200px;
    float :left;
    width:100%;
}

JavaScript

$("#tree li").draggable().droppable({

     element: '#tree',
     tolerance: 'pointer',
     aroundTop: '25%',
     aroundBottom: '25%',
     aroundLeft: 0,
     aroundRight: 0,
     drop: function (event, ui) {
         
         var mousetop = event.pageY - $(this).offset().top;
         var draggedID = $('#' + ui.draggable.attr("id"));

         var dropHeight = $(this).height();
         var draggedTop = draggedID.position().top;
         var dropTop = $(this).position().top;
         var difference = Math.abs(dropTop - draggedTop - mousetop);
         var returnPosition = '';
         if ((dropHeight - 10) < difference) {
             returnPosition = 'bottom';
         } else if ((dropHeight - 20) < difference) {
             returnPosition = 'centre';
         } else {
             returnPosition = 'top';
         }
         
         $('#result').text(difference + 'return ' + returnPosition + ' mousetop' + mousetop);
     }
     //  $('#result').text("top=" + ui.position.top + "  left=" + ui.position.left + "height:" + $('#tree').height() + 'postion' + $(this).attr('id'));
     //alert("top=" + ui.position.top + "  left=" + ui.position.left); //desire result is 'top' ,'bottom' ,center
     //console.log(ui.position);

 });