原生HTML5拖放在IE11中不起作用
[英]Native HTML5 drag and drop not working in IE11
问题描述
I have used javascript code to drag and drop between my divs. 
我使用javascript代码在div之间拖放。 Native HTML5 drag and drop. 原生HTML5拖放。 This code works fine in chrome and firefox but it is not working IE11 Nothing is shown in console too I am unable to find the problem 此代码在chrome和firefox中可以正常工作，但无法正常工作IE11控制台中也未显示任何内容我也找不到问题
here is my code 这是我的代码
<html>
<head>
<style>
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.box {
height: 125px;
width: 125px;
float: left;
border: 3px solid #0092BF;
background-color: #FFEBDD;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
cursor: move;
}
.box header {
color: #fff;
text-shadow: #000 0 1px;
box-shadow: 5px;
padding: 5px;
background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
background: -webkit-gradient(linear, left top, right top,
color-stop(0, rgb(0,0,0)),
color-stop(0.50, rgb(79,79,79)),
color-stop(1, rgb(21,21,21)));
border-bottom: 1px solid #ddd;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
</style>
<body>
<div id="boxes-example">
<div class="box" draggable="true">
<header>A</header>
<p>
order!
</p>
</div>
<div class="box" draggable="true">
<header>B</header>
<p>
Put me
</p>
</div>
<div class="box" draggable="true">
<header>C</header>
<p>
right
</p>
</div>
<div class="box" draggable="true">
<header>D</header>
<p>
into
</p>
</div>
<div class="box" draggable="true">
<header>E</header>
<p>
the
</p>
</div>
</div>
Script for drag and drop: 拖放脚本：
<script>
(function () {
var id_ = 'boxes-example';
var boxes_ = document.querySelectorAll('#' + id_ + ' .box');
var dragSrcEl_ = null;
this.handleDragStart = function (e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.5';
// this/e.target is the source node.
this.addClassName('moving');
};
this.handleDragOver = function (e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function (e) {
this.addClassName('over');
};
this.handleDragLeave = function (e) {
// this/e.target is previous target element.
this.removeClassName('over');
};
this.handleDrop = function (e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// Don't do anything if we're dropping on the same box we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text');
}
return false;
};
this.handleDragEnd = function (e) {
// this/e.target is the source node.
this.style.opacity = '1';
[ ].forEach.call(boxes_, function (box) {
box.removeClassName('over');
box.removeClassName('moving');
});
};
[ ].forEach.call(boxes_, function (box) {
box.setAttribute('draggable', 'true'); // Enable boxes to be draggable.
box.addEventListener('dragstart', this.handleDragStart, false);
box.addEventListener('dragenter', this.handleDragEnter, false);
box.addEventListener('dragover', this.handleDragOver, false);
box.addEventListener('dragleave', this.handleDragLeave, false);
box.addEventListener('drop', this.handleDrop, false);
box.addEventListener('dragend', this.handleDragEnd, false);
});
})();
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2017-08-26 18:15:19
First you're using 'addClassName' which AFAIK is available via Prototype.js (do not confuse it with Jquery's addClass() which does the same thing) 首先，您要使用通过Prototype.js可使用AFAIK的'addClassName' （不要将其与执行相同操作的Jquery的addClass()混淆）
So you need for it to include prototype.js or use another library with another syntax 因此，您需要它包含prototype.js或使用具有其他语法的另一个库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script >
This is enough in order to make your script runs without errors 这足以使您的脚本运行无错误
To make the drag and drop work you need to add preventDefault() in each of the dragenter and drop events handlers : 为了使拖放工作有效，您需要在每个dragenter和drop事件处理程序中添加preventDefault() ：
this.handleDragEnter = function (e) {
e.preventDefault();
this.addClassName('over');
};
this.handleDrop = function (e) {
e.preventDefault();
..............
.......
};
解决方案2
0 2019-03-11 11:06:37
For people who are looking for a solution that works in IE11 as well, Here is a good article which explains it. 对于正在寻找也可以在IE11中使用的解决方案的人们，这里有一篇很好的文章对此进行了解释。 Drag and Drop File Uploading 拖放文件上传
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.