javascript - Angular 拖放列表 : Inputs with draggable property causing unintended behavior in IE

Question

我正在使用 Angular 拖放列表。在 Windows 8 上使用 IE 11 时，我注意到以下错误:

• 我必须双击才能开始输入
• “x”(ms-clear)实际上没有做任何事情
• 我无法突出显示文本。

这在 Chrome 中运行良好，请在 IE 和 Chrome 中尝试以下演示: http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types

有人知道官方修复或解决方法吗？

Answer 1

因此，我想出了一个解决方案来修复我的特定用例，但我很想看看其他人是如何处理这个问题的。

<div class="form-group">
  <div class="row"dnd-list="application.ApplicationFields">
    <div class="col-xs-3" ng-repeat="field in application.ApplicationFields" dnd-draggable="field" dnd-effect-allowed="move" dnd-moved="application.ApplicationFields.splice($index, 1);" dnd-horizontal-list="true">
      <div class="field-group">
        <label class="control-label">Test</label>
          <input dnd-nodrag type="text" ng-mouseenter="removeDrag($event)" ng-mouseleave="addDrag($event)" class="form-control input-sm" name="' + fieldName + '/>
      </div>
    </div>
  </div>
</div>


scope.removeDrag = function (event) {
  $(event.currentTarget).prop("draggable", false);
  $(element[0].parentElement).prop("draggable", false);
}

scope.addDrag = function (event) {
 $(event.currentTarget).prop("draggable", true);
 $(element[0].parentElement).prop("draggable", true);
}

基本上，只要我用鼠标输入输入，它就会禁用输入和父元素上的可拖动属性。这使我可以单击输入，突出显示文本，还可以使用“x”(ms-clear)。一旦鼠标离开输入，我们就可以再次拖动该元素。

这不是一个完美的解决方案，但这解决了我的用例。