I have a simple list of items that I want to reorder using drag and drop. I am using dragula to do that.
Everything is just fine when I use Chrome, but when I test it in IE11 my cursor is flickering while dragging when I am over text fields. Can someone explain me why and how can I avoid this?
Here is the snippet:
dragula([document.querySelector('.draggable-container')]);.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
li {
list-style: none;
}
.draggable-item {
background-color: #eee;
margin: 3px 0;
}
input {
margin: 5px;
width: 500px;
}
.handle {
cursor: move;
padding: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<ul class='draggable-container'>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
<li class="draggable-item">
<span class="handle">↕<span><input type="text">
</li>
</ul>