Question

我一直在用力地敲桌子，我尝试了几个可以接受或注意到的答案，却无法弄清为什么当所有其他浏览器都可以工作时IE仍然很困难。

我在页面上从一个框拖放到另一个框。我有一个正在加载的js文件，并且可以正常工作，直到您将某个元素从一个框拖到另一个框为止。

在debug（inspector）中，我设置了一个事件断点，因为常规的断点拒绝捕获该事件，而且无论如何都没有被触发...

当您在事件期间逐步执行代码时...会将您带到该页面上甚至没有调用的函数...然后由于参数无效而明显失败...

我不知道代码哪里出了问题，但是我确定这是愚蠢的，我无法与您共享整个js文件，因为其中包含的代码是我所包括的公司的财产尽我所能。

这是HTML代码：

<div class="border rounded-left col avail-content" id="left">
    <div class="draggable" ondrop="drop(event);" ondragover="draggedOver(event);" id="avail">
        <ul id="available-content">
             <li draggable="true" id="1" ondragstart="dragStarted(event);" ondragleave="dragLeave(event);">test 1</li>
             <li draggable="true" id="2" ondragstart="dragStarted(event);" ondragleave="dragLeave(event);">test 2</li>
             <li draggable="true" id="3" ondragstart="dragStarted(event);" ondragleave="dragLeave(event);">test 3</li>
             <li draggable="true" id="4" ondragstart="dragStarted(event);" ondragleave="dragLeave(event);">test 4</li>
         </ul>
     </div>
 </div>

拖动事件的javascript代码：

var dragging = null;

function drop(event) {
    event.preventDefault();
    if (event.target.style['border-bottom'] !== '') {
        event.target.style['border-bottom'] = '';
        //event.target.parentNode.insertBefore(dragging, event.target.nextSibling);
        //event.target.insertBefore(dragging, event.target.nextSibling);
        $("#" + event.target.id).after(dragging);
        $('div#right li').appendTo('#selected-content');
        $('div#left li').appendTo('#available-content');
    } else {
        event.target.style['border-top'] = '';
        //event.target.parentNode.insertBefore(dragging, event.target);
        //event.target.insertBefore(dragging, event.target);
        $("#" + event.target.id).before(dragging);
        $('div#right li').prependTo('#selected-content');
        $('div#left li').prependTo('#available-content');
    }
    refreshOrder();
}

function dragStarted(event) {
    if ($('body.default-bg').hasClass('ie')) {
        dragging = event.target;
        event.dataTransfer.setData('Text', dragging);
    } else {
        dragging = event.target;
        event.dataTransfer.setData('text/html', dragging);
    }
}

function draggedOver(event) {
    event.preventDefault();
    var bounding = event.target.getBoundingClientRect();
    var offset = bounding.y + (bounding.height / 2);
    if (event.target.tagName == "LI") {
        if (event.clientY - offset > 0) {
            event.target.style['border-bottom-color'] = 'blue';
            event.target.style['border-top'] = '';
            event.target.style['border-bottom'] = 'solid 3px blue';
        } else {
            event.target.style['border-top-color'] = 'blue';
            event.target.style['border-bottom'] = '';
            event.target.style['border-top'] = 'solid 3px blue';
        }
    } else {
        event.target.style['border-color'] = '';
        event.target.style['border-top'] = '';
        event.target.style['border-bottom'] = '';
    }
}

function draggedOverDiv(event) {
    event.preventDefault();
    var bounding = event.target.getBoundingClientRect();
    var offset = bounding.y + (bounding.height / 2);
    if (event.target.tagName == "LI") {
        if (event.clientY - offset > 0) {
            event.target.style['border-color'] = '';
            event.target.style['border-top'] = '';
            event.target.style['border-bottom'] = '';
        } else {
            event.target.style['border-color'] = '';
            event.target.style['border-bottom'] = '';
            event.target.style['border-top'] = '';
        }
    } else {
        event.target.style['border-color'] = '';
        event.target.style['border-top'] = '';
        event.target.style['border-bottom'] = '';
    }
}

function dragLeave(event) {
    event.target.style['border-bottom'] = '';
    event.target.style['border-top'] = '';
}

这是在进入dragstart事件断点时以及未断点时IE调用的地方。我不知道为什么要这么做：

然后在这里出现错误：

控制台：

然后什么也没有发生，或者浏览器进入调试模式，很难发现问题所在，我必须与IE11及更高版本兼容，这就是为什么我没有说要拧死它的原因...

在替代浏览器中完成的故障排除（按预期工作）： Chrome 68+， Firefox 59.0.2（64位），微软Edge 42.17134.1.0;微软EdgeHTML 17.17134

更新！！！现在可以使用！下面的工作代码： 多亏了一个非常有帮助的评论，我对我的代码做了一些修改，然后开始工作了……还有其他一些错误，但是现在已经解决了：）

JS代码：

var dragging = null;
var usingIE = false;
function dragEventHandler(event) {
   var type = event.type;
   usingIE = Boolean($('body.default-bg').hasClass('ie'));
   switch (type) {
       case 'dragstart':
           dragStarted(event);
           break;
       case 'dragdrop':
           drop(event);
           break;
       case 'dragleave':
           dragLeave(event);
           break;
       default:
           console.log(type);
           return;
   }
}

function drop(event) {
    event.preventDefault();
    if (event.target.style['border-bottom'] !== '') {
        event.target.style['border-bottom'] = '';
        if (usingIE) {
            var moved_element = $(event.dataTransfer.getData("text"));
            var moved_from = (event.target.id == "avail") ? "sele" : "avail";
            $(event.target.id).after(dragging);
            $('#' + moved_from + ' li#' + moved_element.id).remove();
        } else {
            $("#" + event.target.id).after(dragging);
        }
        $('div#right li').appendTo('#selected-content');
        $('div#left li').appendTo('#available-content');
    } else {
        event.target.style['border-top'] = '';
        if (usingIE) {
            var moved_element = $(event.dataTransfer.getData("text"));
            var moved_from = (event.target.id == "avail") ? "sele" : "avail";
            $("#" + event.target.id).before(dragging);
        } else {
            $("#" + event.target.id).before(dragging);
        }
        $('div#right li').prependTo('#selected-content');
        $('div#left li').prependTo('#available-content');
    }
    refreshOrder();
}

function refreshOrder() {
    $('#masterDocDemoView').remove();
    clearDraggedContent();
    clearContentViewArts();
    var artInMasterDoc = $('#selected-content').children("li").toArray();
    for (var i = 0; i < artInMasterDoc.length; i++) {
        try {
            var element = artInMasterDoc[i];
            addDraggedContent(element.id);
            var tempArt = getArticleById(element.id);
            addArtToMasterDoc(tempArt);
        } catch (error) {
            console.log(error);
        }
    }
    if (masterDocContent.length > 0) {
        buildViewDisplay("#content-view-master-document", "#doc-title");
    }
}

IE11拖放未在ondragstart（）上调用正确的功能

0 个答案: