Перетаскивание 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/