JavaScript 代码问题答案

【问题标题】：JavaScript code issueJavaScript 代码问题
【发布时间】：2015-12-04 01:11:41
【问题描述】：

所以我正在阅读这本名为“The Web Game Developer's Cookbook”的书，我偶然发现了一段非常困难的代码。它只是一个将图像拖放到“玩家库存”以将其存储在主要游戏角色的包中的程序。这是代码-

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 引用的元素名称还是完全不同的东西？它说“this”是库存的掉落位置，或者物品将被掉落的位置。

另外，你为什么真的需要“爷爷”？后来在代码中，它谈到了曾祖父母，我以为我们只是在移动保存图像的div。

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

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

谢谢！

【问题讨论】：

标签： javascript drag-and-drop inventory game-development

【解决方案1】：

handleDragStart 在您开始拖动时在itembox 的上下文中调用。 this 是 itembox 元素。

编辑：我不确定handleDrop 中的 if 语句。它必须有更多的上下文。为什么不对此进行测试并设置断点？

【讨论】：

【解决方案2】：

对于您的“主要”问题...第三行...似乎它将用拖动的对象替换该“插槽”中的任何内容。

可能很难理解 draggED 和 draggING 之间的区别——我认为用词不当——太容易被忽视。

当一个对象被丢弃时，鼠标下的所有东西都会被 ping 通。这是由于一种叫做“冒泡”的东西。认为页面上的所有东西都是一堆饼干。如果你真的用力下压一堆饼干，堆栈中的所有饼干都会受到影响。

同样，鼠标会 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>

因此，如果不阅读您手头的全部代码，我猜“爷爷”可能是箱子（就像在我的世界中一样），而曾爷爷可能是一个房间，也可能是个人物品栏或类似的东西。

【讨论】：