Javascript IE11拖放操作未在ondragstart（）上调用正确的函数

我一直在为这个问题头痛，我尝试了几个公认的或著名的答案，但还没有弄明白为什么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>

这是IE在dragstart事件断点进入时调用的位置，以及当它未被断点时调用的位置。我不知道它为什么这么做：

那么这里的错误是：

控制台：

然后什么也没有发生，浏览器进入调试模式，很难看到问题所在，我必须与IE11和更新版本兼容，这就是为什么我没有说去它的

在alt浏览器中完成故障排除（按预期工作）： 铬68+， firefox 59.0.2（64位）， 微软Edge 42.17134.1.0；Microsoft 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");
    }
}

var拖动=null；
var usingIE=假；
函数dragEventHandler（事件）{
var type=event.type；
usingIE=Boolean（$（'body.default bg'）.hasglass（'ie'）；
开关（类型）{
案例“dragstart”：
启动（事件）；
打破
案例“dragdrop”：
下降（事件）；
打破
案例“dragleave”：
德拉格里夫（事件）；
打破
违约：
console.log（类型）；
返回；
}
}
函数删除（事件）{
event.preventDefault（）；
if（event.target.style['border-bottom']！=''）{
event.target.style['border-bottom']=''；
if（usingIE）{
var moved_元素=$（event.dataTransfer.getData（“text”）；
var moved_from=（event.target.id=“avail”）？“sele”：“avail”；
$（event.target.id）.after（拖动）；
$（“#”+moved_from+“li#”+moved_element.id）.remove（）；
}否则{
$（“#”+event.target.id）.after（拖动）；
}
$（'div#right li'）。附加到（'selected content'）；
$（'div#left li'）。附加到（'available content'）；
}否则{
event.target.style['border-top']=''；
if（usingIE）{
var moved_元素=$（event.dataTransfer.getData（“text”）；
var moved_from=（event.target.id=“avail”）？“sele”：“avail”；
$（“#”+event.target.id）.before（拖动）；
}否则{
$（“#”+event.target.id）.before（拖动）；
}
$（'div#right li'）。prependTo（'selected content'）；
$（'div#left li'）。prependTo（'available content'）；
}
刷新顺序（）；
}
函数refreshOrder（）{
$（'#masterDocDemoView'）。删除（）；
ClearDragedContent（）；
clearContentViewArts（）；
var artInMasterDoc=$（“#所选内容”）.children（“li”）.toArray（）；
对于（变量i=0；i0）{
buildViewDisplay（“内容视图主控文档”，“文档标题”）；
}
}

事件。目标

不是字符串，传递它有“文本”数据是对失败的调用（由于IE不支持除此“文本”选项以外的任何选项，所以它们抛出是有意义的。@Kaido那么你怎么能在IE中拖动元素呢？这似乎是一个严重的障碍。而且似乎只有internet explorer才支持，Edge似乎对此没有问题，我添加了更多代码试图跟踪事件，但现在它在其他地方失败了，但是同样的错误…为什么IE调试器很差劲？！？（修辞）…你建议我如何处理我试图移动的元素？好的，我已经检查了你提到的可能导致问题的代码，我认为你是对的。

“[object htmlilement]”当我使用chrome开发工具中的
event.dataTransfer.setData（“text”，event.target）；
和调用
event.dataTransfer.getData（“text”）设置数据时，
似乎会返回

…@kaido--谢谢你的建议，我能让它工作起来……这是你的功劳……你介意把你的评论作为一个回答，这样我就可以相信你的发现了吗？

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