Проблема с кодом JavaScript

Question

Итак, я читаю эту книгу под названием «Поваренная книга разработчиков веб-игр», и я наткнулся на действительно сложный фрагмент кода. Это просто программа для перетаскивания изображений в «инвентарь игрока», чтобы сохранить его в сумке основного игрового персонажа. Вот код-

var draggingObject; 
function handleDragStart(e) { 
    draggingObject = this; 
    e.dataTransfer.setData('text/html', this.innerHTML); 
    var dragIcon = document.creteElement('img'); 
    var imageName = this.firstChild.id; 
    dragIcon.src = imageName + '.png'; 
    e.dataTransfer.setDragImage(dragIcon, -10, 10); 
} 

function handleDragOver(e) { 
    e.preventDefault(); 
} 

function handleDrop(e) { 
    e.preventDefault(); 
    if (draggingObject != this) { 
     var draggingGrandpa = 
      draggingObject.parentElement.parentElement; 
     var draggedToGrandpa = 
      this.parentElement.parentElement; 
     var draggingObjectId = 
      draggingObject.firstChild.id; 
     inventoryObject.add(draggedToGrandpa.id, draggingObjectId); 
     inventoryObject.remove(draggingGrandpa.id, draggingObjectId); 
     draggingObject.innerHTML = this.innerHTML; 
     this.innerHTML = 
      e.dataTransfer.getData('text/html'); 
      this.classList.remove('empty'); 
      draggingObject.classList.add('empty'); 
    } 
} 

var itemBoxes = document.querySelectorAll('.inventory-box'); 
[].forEach.call(itemBoxes, funtion(itemBox) { 
    itembox.addEventListener('dragstart', handleDragStart); 
    itembox.addEventListener('dragover', handleDragOver); 
    itembox.addEventListener('drop', handleDrop); 
}); 

Итак, прежде всего, я действительно запутались в 3-й строке кода, который

draggingObject = this; 

Так что в этом случае, что {это}? Это просто имя элемента, которое упоминается в itemBoxes, или что-то совсем другое? В нем говорилось, что «это» была позиция падения инвентаря или позиция, в которой элемент будет удален.

Кроме того, почему вам действительно нужен «дедушка»? Позже в коде говорится о прабабудах и бабушке, и я думал, что мы перемещаем только div, в котором находится изображение.

Мой главный вопрос в третьей функции (handleDrop). В третьей строке этой функции draggingObject должен быть равен этому (поскольку он был установлен равным этому в функции handleDragStart). В этом случае код в блоке if не будет выполняться.

Может кто-нибудь, пожалуйста, помогите мне с этой проблемой? Я очень смущен и очень нуждаюсь в помощи.

Спасибо!

Answer 1

handleDragStart вызывается в контексте itembox, когда вы начинаете перетаскивать его. this - элемент itembox.

Редактировать: Я не уверен в том, что оператор if в handleDrop. Должен быть некоторый контекст. Почему бы не проверить это и установить точку останова?

Answer 2

Для вашего «главного» вопроса ... эта 3-я строка ... похоже, что она заменит все, что находится в этом «слоте» с объектом draggED.

Возможно, будет трудно прочитать разницу между перетаскиванием и перетаскиванием - плохой выбор слов, которые я считаю - слишком легко упустить.

Когда объект падает, все под мышкой будет расказываться. Это связано с тем, что называется «пузырящийся». Подумайте, как все вещи на странице - это стопка крекеров. Если вы сильно надавите на стопку крекеров, все взломщики в стеке будут затронуты.

Аналогично, мышь пинает весь элемент, находящийся под мышью, фактически как на мыши, так и на мышку, а также на перетаскивание, падение, перемещение и т. Д. Все под мышкой принимает события.

Итак, в этой функции вы увидите инвентарь «ДОБАВИТЬ» дедушку с перетаскиванием и «УДАЛИТЬ» дедушку перетаскивания.

Вот еще некоторые дерьмо я написал, что может или не может быть полезным:

В JavaScript HTML, «DOM» преобразуется в «JavaScript мира». Поэтому каждый HTML-элемент преобразуется в «объект» javascript.

Объект javascript, представляющий HTML DIV, является очень сложной «вещью», и поэтому «это» - это сложная «вещь».

Итак, где бы вы ни увидели «это», обычно будет точка, привязанная к этому.

Например:

this.innerHTML 
this.firstChild 
this.classList 

И это, как мы Javascript люди взаимодействуют с материалом на этой странице.

Так что в коде при запуске перетаскивания они отмечают, какая вещь перетаскивается, делая переменную draggingObject ссылкой на эту вещь, которую пользователь начал перетаскивать. И когда пользователь перестает перетаскивать (опускает элемент), они проверяют, была ли потерянная вещь тем же самым, что пользователь начал перетаскивать.

Компьютеры и программы не могут магически читать ум человека, использующего его. Программисты должны быть очень откровенными и сообщать программе, как делать каждую мелочь - например, компьютер - это младенец, который ничего не знает.

Дедушка - это простой способ, которым автор решил обратиться к изображению (или DIV или другому элементу HTML) на странице, в которой находится перетаскиваемая вещь.

Например, HTML является иерархия, с изображениями и параграфов и DIV и все друг в друге:

<div id="grandpa"> 
    <div id="dad"> 
     <div id="son"> 

     </div> 
    </div> 
</div> 

Так, не читая весь код у вас есть под рукой, я бы предположил, что «дедушка», вероятно, сундук (как в minecraft) и greatGrandpa может быть комнатой или, возможно, личным инвентарем или что-то вроде этого.