为啥我的 javascript 在 github 页面上无法正常工作？

Posted 2023-05-08

【中文标题】为啥我的 javascript 在 github 页面上无法正常工作？

【英文标题】：Why my javascript does not work properly on a github page?为什么我的 javascript 在 github 页面上无法正常工作？

【发布时间】：2016-03-30 19:03:50

【问题描述】：

我的 javascript 在 GitHub 页面上无法正常工作：拖放功能在 GitHub 页面上已损坏，但在使用同一浏览器在本地运行时却没有。 我尝试使用 chrome 和 Firefox（最新版本）

1- Here is the GitHub page not working properly

2- And here is the source code which is working locally on my computer

我在 dragenter 事件上的 lib/list.js:84 中设置了一个断点。我们应该通过下一个街区。 event.dataTransfer.getData('source') 不会返回我们之前设置的值。

这里是部分源代码：（其余在 GitHub 上）

         self_.itemContainer_.addEventListener(
             'dragstart',
             function(event) 
                if(event.target.classList.contains('sosimplist-item'))
                    var parentToDrag = event.target.closest('.sosimplist-item');
                    parentToDrag.style.zIndex = 1;
                    parentToDrag.style.boxShadow = '3px 3px 3px grey';
                    event.dataTransfer.setData('elementId', parentToDrag.id);
                    event.dataTransfer.setData('source', 'item');
                else
             ,
             false
         );
         self_.itemContainer_.addEventListener(
             'dragenter',
             function(event) 
                event.preventDefault();

                if(event.dataTransfer.getData('source') === 'item')
                    var elementDragged = document.getElementById(event.dataTransfer.getData('elementId'));
                    if(elementDragged)
                        var parentTarget = event.target.closest('.sosimplist-item');
                        var isContainInThisList = parentTarget.parentNode.contains(elementDragged);
                        if(isContainInThisList)
                            elementDragged.nextSibling === parentTarget ?
                            elementDragged.parentNode.insertBefore(elementDragged, parentTarget.nextSibling) :
                            elementDragged.parentNode.insertBefore(elementDragged, parentTarget);
                        else
                    else
                else
             ,
             false
         );

【问题讨论】：

你做了什么来调试你的代码？

从 github 页面运行时，'event.dataTransfer.getData('source')' 似乎不起作用。我在这里放了一个断点：lib/list.js:84，当你拖动一个项目时，你应该穿过这个块

同一个兄弟 = 同一个浏览器 ?

请在此处发布您的代码，而不仅仅是作为 github 的链接

您的 gh pages 版本在 ubuntu 14.04 Firefox 43 上运行，但在 Chromium 47 上不运行。

【参考方案1】：

我正在回答自己，我已通过在 dragenter 事件中不访问 event.dataTransfer.getData 来解决此问题。我正在使用本地对象来存储我需要的信息。

这个话题启发了我：

html5 DnD dataTransfer setData or getData not working in every browser except Firefox

感谢您的帮助