Drag down issue on IE8, IE9

[deeta]

When dragging cells in IE, other text in the table gets selected - similar to a mouse drag on a normal web page.
If you select the cell on the first row/column and drag down slowly, you can see the issue.

I have an example here
http://jsfiddle.net/hU6Kz/548/

I tried adding the onselectstart="return false;" on the grid and it helps with the drag down problem but the copy/paste with Ctrl-C and Ctrl-V dont work.

I haven't looked deep enough, but I think if the onselectstart can be disabled during the drag events, the issue can be fixed.

You may have a better solution. Please let me know. Thanks!

[warpech]

I have also noticed it but didn't have good luck fixing it. Did you manage to fix it as you described?

[deeta]

didn't quite get to it, but I will keep you posted

[deeta]

I think I got it to work. Can you review this?

When the drag starts, add the "onselectstart" attribute

/**
 * Create DOM element for drag-down handle
 * @constructor
 * @param {jQuery} $container jQuery DOM element of handsontable container
 */
function FillHandle($container) {
  this.$container = $container;
  var container = this.$container[0];

  this.handle = document.createElement("div");
  this.handle.className = "htFillHandle";
  this.disappear();
  container.appendChild(this.handle);

  var that = this;
  $(this.handle).mousedown(function () {
    that.isDragged = 1; 
    /** START: IE Hack to disable text selection during the drag **/
    $(container).attr("onselectstart", "event.returnValue=false;");        
  });
}

When drag ends, remove it

  function onMouseUp() {
    if (priv.isMouseDown) {
      setTimeout(editproxy.focus, 1);
    }
    priv.isMouseDown = false;
    if (priv.fillHandle && priv.fillHandle.isDragged) {
      if (priv.fillHandle.isDragged > 1) {
        autofill.apply();
      }
      priv.fillHandle.isDragged = 0;
        /** END: IE Hack to disable text selection during the drag **/
      $(self.container).removeAttr("onselectstart");
    }
  }

[warpech]

Thanks @deeta, I think your solution really solves the problem! I just merged it with core, though I think I did it in less hackish way. Just added this few lines in FillHandle constructor:

this.$container.find('table').on('selectstart', function (event) {
  //https://github.com/warpech/jquery-handsontable/issues/160
  //selectstart is IE only event. Prevent text from being selected when performing drag down in IE8
  event.preventDefault();
});

Could you please recheck?

[deeta]

That did the trick!
And yes, definetly much cleaner. Thanks again!