javascript drag and drop need help with pasting into one div tag

I had this code correct before but accidently deleted it!!! AGH.. and I do not remember what I did spent another good amount of time trying to figure it out today. Can't remember what i did... Anyways when you drag and drop you can drop by order, from the top or bottom middle in between numbers etc... Where I need help is with only allowing the dropping to drop zone or between the 2 drop here areas.. Any help suggestions pointers is appreciated.

  <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:

 

If it helps any. I did find out how to limit it to certain div tags. However.. Dropping from the top or the bottom or even the center can be a bit sticky at times.

https://jsfiddle.net/2hj3f86x/4/