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

Question

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

• I need to double click to start typing
• "x" (ms-clear) actually does nothing
• I can not select the text.

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

Does anyone know of an official fix or workaround?

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

, , draggable , . , , "x" (ms-clear). , .

, .