为什么在IE11中拖放期间光标会闪烁?

时间:2016-03-17 13:14:41

标签: javascript internet-explorer dragula

我有一个简单的项目列表,我想使用拖放重新排序。我正在使用dragula来做到这一点。

当我使用Chrome时,一切都很好,但是当我在IE11中测试时,当我在文本字段上时,我的光标会在拖动时闪烁。有人可以解释我为什么以及如何避免这种情况?

以下是摘录:



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">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
  <li class="draggable-item">
      <span class="handle">&#x2195;<span><input type="text">
  </li>
</ul>
&#13;
&#13;
&#13;

0 个答案:

没有答案