为什么我的 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 上不运行。

标签： javascript github github-pages

【解决方案1】：

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

这个话题启发了我：

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

感谢您的帮助

【讨论】：