Why my javascript does not work properly on a github page?

Question

My JavaScript does not work properly on a GitHub page: The drag and drop feature is broken on the GitHub page, but not when running locally with the same browser. I tried with both chrome and Firefox (up to date version)

1- Here is the GitHub page not working properly

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

I put a breakpoint in lib/list.js:84, on the dragenter event. We should go through the next block. event.dataTransfer.getData('source') does not return the value we set before.

Here is a part of the source code: (the rest on 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
         );

It seems like 'event.dataTransfer.getData('source')' is not working when running from github page. I put a breakpoint here: lib/list.js:84, when you drag an item, you should go through this block — Arno, Dec 24 '15 at 10:37
Your gh pages version is working on ubuntu 14.04 Firefox 43 but not on Chromium 47. — David Jacquel, Dec 24 '15 at 16:49

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

I am answering myself, I have fixed this issue by not accessing event.dataTransfer.getData in the dragenter event. I am using a local object to store information I need instead.

This thread inspired me:

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

Thank you for your help

edited May 23 '17 at 11:44

Community

1
1

answered Dec 24 '15 at 19:32

Arno

1
2

Why my javascript does not work properly on a github page?

1 Answers1