Angular-drag-and-drop-lists:具有draggable属性的输入,在IE中导致意外行为

Jsh*_*523 5 javascript drag-and-drop angularjs

我正在使用Angular-drag-and-drop-lists.在Windows 8上使用IE 11时,我注意到以下错误:

  • 我必须双击才能开始输入
  • "x"(ms-clear)实际上并没有做任何事情
  • 我不能突出文字.

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

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

Jsh*_*523 3

因此,我提出的解决方案修复了我的特定用例,但我有兴趣了解其他人如何处理这个问题。

<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);
}
Run Code Online (Sandbox Code Playgroud)

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

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