Angular-drag-and-drop-lists: Inputs with draggable property causing unintended behavior in IE

Question

I'm using Angular-drag-and-drop-lists. When using IE 11 on Windows 8, I noticed the following errors:

• I have to double-click to start typing
• The "x" (ms-clear) doesn't actually do anything
• I can't highlight the text.

This works fine in Chrome, try the following demo in both IE and Chrome: http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types

Would anyone know of an official fix or workaround?

Answer 1

So a solution I came up with fixes my particular use case, but I'd be interested to see how others are handling this.

<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);
}

Basically as soon as I mouse enter the input, it disables the draggable property on both, the input and the parent element. This allows me to click into the input, highlight the text, and also use the "x" (ms-clear). As soon as the mouse leaves the input, we're able to drag the element once again.

Not a perfect solution, but this fixed my use case.