JavaScript代码问题

JavaScript code issue

本文关键字：问题 代码 JavaScript      更新时间：2023-09-26

所以我正在读一本名为《网络游戏开发者食谱》的书，我偶然发现了一段非常困难的代码。它只是一个程序，可以将图像拖放到"玩家库存"中，并将其存储在游戏主角的包中。这是代码-

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

所以首先，我真的很困惑第三行代码，那就是

    draggingObject = this;

那么在这种情况下，{this}是什么？是从itemBoxes引用的元素名称，还是完全不同的名称？该公司表示，"这"是库存的投放位置，或物品将被投放的位置。

还有，你为什么真的需要"爷爷"？在代码的后面，它谈到了曾祖父母，我认为我们只是在移动图像所在的div

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

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

谢谢！

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

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

对于您的"主要"问题。。。第三行。。。它似乎要用draggED对象替换"槽"中的任何内容。

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

当一个对象被丢弃时，鼠标下的所有东西都会被ping到。这是由于一种叫做"冒泡"的东西。想象一下页面上所有的东西都是一堆饼干。如果你在一堆饼干上用力按压，那么饼干堆中的所有饼干都会受到影响。

同样，鼠标会ping鼠标下面的所有元素，实际上是在鼠标向下和向上，以及拖放、移动等。鼠标下面的一切都会接收到事件。

因此，在该函数中，您将看到库存"添加"拖动爷爷和"移除"拖动爷爷。

以下是我写的一些可能有用也可能无用的废话：

在javascript中，HTML"DOM"被转换为"javascript世界"。因此，每个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>

所以，如果不阅读你手头的全部代码，我猜"爷爷"可能是胸部（就像在minecraft中一样），而曾爷爷可能是一个房间，也可能是个人库存或类似的东西。

相关文章：