简体   繁体   中英

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM