Перетаскивание javascript нужна помощь со вставкой в один тег div

Раньше у меня был правильный код, но я случайно удалил его!!! Ага.

и я не помню, что я сделал, потратил еще много времени, пытаясь понять это сегодня.

Не могу вспомнить, что я сделал.

В любом случае, когда вы перетаскиваете, вы можете бросать по порядку, сверху или снизу посередине между числами и т. д... Где мне нужна помощь, так это разрешить перетаскивание только в зону сброса или между 2 области, оставленные здесь.

Любые подсказки с подсказками приветствуются.

  <script>


var dragging = null;


document.addEventListener('dragstart', function(event) {


dragging = event.target;


// still does everything event.dataTransfer.setData(document.getElementsByTagName("dropzone"), event.target.id);


//event.dataTransfer.setData('text/html', dragging);


event.dataTransfer.setData("Text", event.target.id);


// alert('DRAGSTART');


// as soon as we click to drag


});


document.addEventListener('dragover', function(event) {


event.preventDefault();


// once we start draggingalert('DRAGS OVER');


/// this sort of works ev.dataTransfer.setData("text", ev.target.id);


//window.requestAnimationFrame(function(){


var bounding = event.target.getBoundingClientRect();


var offset = bounding.y + (bounding.height/2);


if ( event.clientY - offset > 0 ) {


event.target.style['border-bottom'] = 'solid 4px blue';


event.target.style['border-top'] = '';


} else {


event.target.style['border-top'] = 'solid 4px blue';


event.target.style['border-bottom'] = '';


}


//});


});


document.addEventListener('dragleave', function(event) {


// event


// alert('DRAG LEAVE');


// if ( event.target.className == "dropzone" ) {


// event.target.className == "droptarget"


// if ( event.target===event.target.className."sortable-bulk") {


event.target.style['border-bottom'] = '';


event.target.style['border-top'] = '';


// }


// }


});


document.addEventListener('drop', function(event) {


// alert('DROP');


event.preventDefault();


// this limits it but doesn't allow sort order....if ( event.target.className == "dropz" ) {


//if ( event.target.className == "location" ) {


if ( event.target.style['border-bottom'] !== '' ) {


event.target.style['border-bottom'] = '';


event.target.parentNode.insertBefore(dragging, event.target.nextSibling);


} else {


event.target.style['border-top'] = '';


event.target.parentNode.insertBefore(dragging, event.target);}


});


</script>


<style> ul {


margin:0;


padding:0


}


li {


cursor:move;


display:block;


padding:20px 10px;


background:white;


border-bottom:solid 1px gray;


}</style>


<div class="no" onDragStart="return false;" ondragenter="return false;" ondragover="return false;" ondrop="return false;" style="float:left; background-color:#007f00; width:800px; height:900px;">


<div class="no" oonDragStart="return false;" ondragenter="return false;" ondragover="return false;" ondrop="return false;" style="float:left; background-color:#414242; width:800px; height:200px;">dfsadfs</div>


<div class="no" onDragStart="return false;" ondragenter="return false;" ondragover="return false;" ondrop="return false;" style="float:left; background-color:#414242; width:800px; height:200px;">dfs323232adfs</div>


<div class="no" onDragStart="return false;" ondragenter="return false;" ondragover="return false;" ondrop="return false;" style="float:left; background-color:#414242; width:800px; height:200px;">dfs23e3232adfs</div>


</div>


<br><br>2


RUN QUERY HERE - IF ZERO SHOW THIS ->


<div class="dropzone" >dsfsdfsd


<ul class="location" >


<li draggable="false" >draghere\/</li>


<li draggable="false" >draghere/\</li>


</ul>


</div>


<br><br>


IF NOT ZERO - THEN ALL OPTIONS HERE


<BR><BR><BR><BR><BR>


<div class="dropzone">


<ul2 class="nolocation" style="background-color:red; height:200px; width:200px;">maybeeee??


<li draggable="true" data-appendto="green" id="dragtarget1" class="sortable-bulk" value="1">List Item 1</li>


<li draggable="true" data-appendto="green" class="sortable-bulk" id="dragtarget2" value="2">List Item 2</li>


<li draggable="true" class="sortable-bulk" id="dragtarget3" value="3">List Item 3</li>


<li draggable="true" class="sortable-bulk" id="dragtarget4"value="4">List Item 4</li>


<li draggable="true" class="sortable-bulk" id="dragtarget5"value="5">List Item 5</li>


<li draggable="true" class="sortable-bulk" id="dragtarget6"value="6">List Item 6</li>


<li draggable="true" class="sortable-bulk" id="dragtarget7"value="7">List Item 7</li>


<li draggable="true" class="sortable-bulk" id="dragtarget8" value="8">List Item 8</li>


<li draggable="true" class="sortable-bulk" id="dragtarget9" value="9">List Item 9</li>


<li draggable="true" class="sortable-bulk" id="dragtarget10" value="10">List Item 10</li><BR><BR><BR></ul2>


</div>

HTML:

Если это кому-то поможет. Я узнал, как ограничить его определенными тегами div. Однако... Падение сверху, снизу или даже из центра иногда может быть немного липким.
https://jsfiddle.net/2hj3f86x/4/