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;

所以在这种情况下，{this}是什么？它只是从itemBoxes引用的元素名称还是完全不同的东西？它说“这个”是库存的下降位置，或者物品将被丢弃的位置。

另外，你为什么真的需要'爷爷'？稍后在代码中，它谈到了曾祖父母，我认为我们只是移动了图像所在的div。

我的主要问题是第3个函数（handleDrop）。在此函数的第三行中，draggingObject必须等于this（因为它在函数handleDragStart中设置为等于此值）。在这种情况下，if块中的代码将不会执行。

有人可以帮我解决这个问题吗？我非常困惑，真的需要帮助。

谢谢！

Answer 1

当你开始拖动它时，在handleDragStart的上下文中调用

itembox。 this是itembox元素。

编辑：我对handleDrop中的if语句不确定。必须有一些更多的背景。为什么不测试它并设置断点？

Answer 2

对于你的“主要”问题......第3行......似乎它将用draggED对象替换那个“槽”中的任何内容。

可能很难理解拖延和拖延之间的区别 - 我认为错误的选择 - 太容易忽视了。

当一个物体掉落时，鼠标下的所有东西都会被瞄准。这是由于一种叫做“冒泡”的事情。想想页面上的所有内容都是一堆破解者。如果你在堆栈的破解者身上狠狠地推倒，那么堆栈中的所有破解者都会受到影响。

同样地，鼠标会对鼠标下方的所有元素进行ping操作，实际上鼠标向下和鼠标向上，以及拖放，移动等等。鼠标下的所有内容都会接收事件。

因此，在该功能中，您将看到库存“添加”已拉扯的爷爷，并“删除”这位旷日持久的爷爷。

这里有一些我写的废话可能有用也可能没用：

在javascript中，HTML“DOM”被转换为“javascript world”。因此，每个HTML元素都转换为javascript“对象”。

表示HTML DIV的javascript对象是一个非常复杂的“事物”，因此“this”就是那么复杂的“事物”。

所以无论你在哪里看到“这个”，通常都会附加一些点。

例如：

this.innerHTML
this.firstChild
this.classList

这就是我们javascript人们与页面上的内容进行互动的方式。

所以在代码中，当拖动开始时，他们通过使draggingObject变量引用用户开始拖动的东西来标记正在拖动的东西。当用户停止拖动（删除项目）时，他们会检查丢弃的东西是否与用户开始拖动的东西相同。

计算机和程序无法神奇地阅读使用它的人的思想。程序员必须非常明确，并告诉程序如何做每一件小事 - 比如计算机是一个对任何事情毫无头绪的婴儿。

爷爷是一个友好的方式，作者决定在可拖动的东西所在的页面中引用图像（或DIV或其他HTML元素）。

例如，HTML是一个层次结构，图像和段落以及DIV都在彼此之内：

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

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

所以如果没有阅读你手边的全部代码，我猜想“爷爷”可能是胸部（就像在我的世界中）而且伟大的爷爷可能是一个房间，也可能是个人库存或类似的东西。

JavaScript代码问题

2 个答案: