Как избежать повторов?

[miltorg]

Есть код:

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;
k4.ondragstart=dragstart_handler;
k4.ondragend = dragend_handler;
k5.ondragstart=dragstart_handler;
k5.ondragend = dragend_handler;
k6.ondragstart=dragstart_handler;
k6.ondragend = dragend_handler;
k7.ondragstart=dragstart_handler;
k7.ondragend = dragend_handler;
k8.ondragstart=dragstart_handler;
k8.ondragend = dragend_handler;

Как избежать повторов? Тем более что до конца не ясно сколько будет v1..vn

Спасибо

[рони]

miltorg,
сделать цикл или использовать родителя.

[miltorg]

miltorg,
сделать цикл или использовать родителя.

А цикл по чём? v1...vn - это <div> - количество которых не известно

А родителя это как? Намекните пожалуйста.
Я даже не могу правильно сформулировать вопрос для Гугла

Спасибо.

[ksa]

v1...vn - это <div> - количество которых не известно

Но их как-то можно выбрать... Например дать им некий общий класс.

А родителя это как? Намекните пожалуйста.

Пора тебе делать тестовый пример.
На нем и будут показывать.

[miltorg]

Пора тебе делать тестовый пример.
На нем и будут показывать.

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

[miltorg]

Но их как-то можно выбрать... Например дать им некий общий класс.

А дальше то что?

[Aetae]

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');

[ksa]

А дальше то что?

Обрабатывать в цикле.

Пример конечно капец какой корявый...
Что ты там гонощишь в итоге?

[miltorg]

class Drag {
  drop = drop_handler;
  dragover = dragover_handler;
  dragstart =dragstart_handler;
  dragend = dragend_handler;
  
  ...

Работает. Ура! Огромное спасибо!

[miltorg]

drop_handler не срабатывает. А он нужен.