Как показать элем-ты массива (использую JQUERY UI)

Вопрос-ответ JavaScript
1

При перетаскивании drag1 на drop1 должен появиться arr3[0]-CAT, при перетаскивании drag2 на drop2 должен появиться arr3[1]-DOG, при перетаскивании drag3 на drop3 должен появиться arr3[2]-BERD. На данный момент появляется только arr3[2]-BERD, причем сразу и неважно какой drag был перемещен. Как исправить ошибку?

<style>
div[id^="drag"]{
background-color:orange;
width: 7rem;
height: 3rem;
display:inline-block;
color: white;
}
div[id^="drop"]{
background-color:green;
width: 7rem;
height: 3rem;
display:inline-block;
color: white;
}
</style>
<div id="enlg">
<div id="drag1">drag1</div>
<div id="drag2">drag2</div>
<div id="drag3">drag3</div>
</div>
<div id="prepos">
<div id="drop1">drop1</div>
<div id="drop2">drop2</div>
<div id="drop3">drop3</div>
</div>
<script>
var arr3=['CAT','DOG', 'BERD'];
$(document).ready(function() {
var drag="#drag";
for(i=1; i<=3;i++){
var a=String(i);
var b="#drag"+a;
var c="#drop"+a;
$(b).draggable(700);
$(c).droppable({accept:b,hoverClass:"drags"},{drop:function(e, ui){
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("ui-state-highlight");
if($('#drag1'))
{ $(c).html(arr3[0]);
}
if($('#drag1')){
$(c).html(arr3[1]);
}
if($('#drag2')){
$(c).html(arr3[2]);
} } })}
})
2 

// Ну вар-ы уже многие годы не используются, да и название переменной должно
// нести смысловую нагрузку

const ANIMALS = ["CAT", "DOG", "BERD"];

// var drag = "#drag"; неиспользуемая перемення

//  var a = String(i);
//  var b = "#drag" + a; - здесь будет автоматическое приведение к строке, выше строка не имеет смысла

// Циклы можно и простить через .forEach / .map

ANIMALS.map((name, index) => {
  initDroppable({
    name: name,
    elDrag: $(`#drag${index}`),
    elDrop: $(`#drop${index}`),
  })
})

// Внутренности надо выносить, что бы избегать вложенности и проблем с
// пониманием и расширяемосью в будущем

const initDroppable = ({ elDrag, elDrop, name }) => {
  elDrag.draggable(700);
  elDrop.droppable(
    { accept: elDrag.selector, hoverClass: "drags" },
    {
      drop: function (e, ui) {
        $(this).html(ui.draggable.remove().html());
        $(this).droppable("destroy");
        $(this).addClass("ui-state-highlight");
        if (elDrag) { // Здесь по идее всегда true так как элементы существуют
          elDrop.html(name);
        }
      },
    }
  );
};

// К сожаления у меня нет ответа, работает ли выше мною написанное, так как
// давно не работал с jQ UI, я только упроситил код что бы было понятнее.

// На сколько я понял вы на этот пример с оф. документации ориентируетесь:
// https://jqueryui.com/droppable/#visual-feedback

const initDragDrop = ({ elDrag, elDrop, name }) => {
 elDrag.draggable();
 elDrop.droppable({
   classes: {
     "ui-droppable-active": "ui-state-default",
   },
   drop: function (event, ui) {
      $(this).html(ui.draggable.remove().html());
      $(this).addClass("ui-state-highlight");
      
      elDrop.html(name);
   },
 });
}

$(function () {
  ANIMALS.map((name, index) => {
    initDragDrop({
      name: name,
      elDrag: $(`#drag${index}`),
      elDrop: $(`#drop${index}`),
    });
  });
});
1 лайк