<table class="vse">
  <tr>
    <td>




<div class="ramka">
<div class="zag_ramka">
    2021-08-21T05:00:00</div>
<div class="otstup">

  <div id="v1" data-myid="2523">
  2523        gggg    </div>
  
  <br>----<br>
  <div id="v2" data-myid="2525">  
  2525   sssssssss  оллл    </div>  
   
  </div>
  </div>

  
<div class="ramka">
<div class="zag_ramka">
    2021-07-09T05:00:00</div>
<div class="otstup">

  <div id="v3" data-myid="2585">
  2585   sssssss fffffff    </div>
  
  <br>----<br>
  <div id="v4" data-myid="2586">  
  2586   hhhhhh hhhhhhh  <p>Нужен кран прораб 222322</p>
  </div>  
   
</div>
</div>

    <td>

<div class="kran">

<div id="k1" draggable="true">11111111</div>




<div id="k2" draggable="true">22222222</div>




<div id="k3" draggable="true">3333333</div>

</div></table>




<script>
  
function dragstart_handler(ev) {
 console.log("dragStart");
 
}
function dragover_handler(ev) {
 console.log("dragOver");

}
function drop_handler(ev) {
  console.log("Drop");

}


function dragend_handler(ev) {
  console.log("dragEnd");


}

v1.ondrop = drop_handler;
v1.ondragover= dragover_handler;
v2.ondrop = drop_handler;
v2.ondragover= dragover_handler;
v3.ondrop = drop_handler;
v3.ondragover= dragover_handler;
v4.ondrop = drop_handler;
v4.ondragover= dragover_handler;


k1.ondragstart=dragstart_handler;
k1.ondragend = dragend_handler;
k2.ondragstart=dragstart_handler;
k2.ondragend = dragend_handler;
k3.ondragstart=dragstart_handler;
k3.ondragend = dragend_handler;



</script>

class Drag {
  drop = drop_handler;
  dragover = dragover_handler;
  dragstart =dragstart_handler;
  dragend = dragend_handler;
  
  events = ['dragover', 'drop', 'dragstart', 'dragend'];
  
  constructor(targetSelector, elementSelector) {
    this.targetSelector = targetSelector;
    this.elementSelector = elementSelector;
    this.start();
  }
  
  handleEvent(event) {
    let { type, target } = event;

    switch(type) {
      case 'dragover':
      case 'drop':
        target = target.closest(this.targetSelector);
        break;
      case 'dragstart':
      case 'dragend':
        target = target.closest(this.elementSelector)
        break;
    }
    
    if(target)
      this[type].call(target, event);
  }

  start() {
    this.events.forEach(type => document.addEventListener(type, this));
    return this;
  }
  stop() { 
    this.events.forEach(type => document.removeEventListener(type, this));
    return this;
  }
}

const drag = new Drag('.drag-target', '.drag-element');

this[type].call(target, event);

if(target)
  this[type].call(target, event);

for (let i=1; i < 5; i++) {
 window['v'+i].ondrop = drop_handler;
  window['v'+i].ondragover = dragover_handler;
} 


for (let i=1; i < 4; i++) {
 window['k'+i].ondragstart = dragstart_handler;
  window['k'+i].ondragend = dragend_handler;
}

mv = document.querySelectorAll("[id^=v]");
mk = document.querySelectorAll("[id^=k]");

for (let i=0; i < mv.length; i++) {
  mv[i].ondrop = drop_handler;
  mv[i].ondragover = dragover_handler;
  }

for (i=0; i < mk.length; i++) {
  mk[i].ondragstart = dragstart_handler;  
  mk[i].ondragend = dragend_handler;
  }