Two question regarding .draggable in Chrome and IE

I'm creating a game board with pieces you can move around, all of them using the .draggable jQuery UI class. There are the game pieces, which are draggable, and these lie on top of a table which is the grid. Both the table and the pieces are parented to a div element which is, itself draggable. The goal is to give players a large play area they can move around and look at.

URL: http://shionyr.com/gamekeeper/dragger.php

The table works fine in Firefox. However, two completely different issues arise in Chrome and IE, presumably from the same core issue with how my code is handling the elements.

Chrome: The parent div drags funny after the first time you drag it. Specifically, if you start to drag it a second time, it won't start dragging until you release the mouse button. The problem fixes if you reload the page, and doesn't happen as long as you drag slightly outside of the grid area.

IE: When you attempt to drag an image, the parent div and the image drag at the same time, with the image accelerati开发者_运维知识库ng to accomodate for the movement of the div. I tried using z-index to fix this, no jazz.

I've tried using several settings, styles, event tags to fix this problem, but nothing seems to work 100%. Thanks for the help!

Chrome issue:

You used a class no-select to prevent selection on your drag mouse events. The structure of your document:

<div><!-- Main container -->
   <table>...</table><!-- Grid -->
   <img><!-- Draggables -->
</div>

You put your no-select class on your table, which left your draggable images unaffected. Due to random browser behaviour, when you moved your container by dragging your grid, an invisible selection was created. When you started dragging the second time, you actually started dragging the selected content, which caused the drag to start on mouseup.

Solution: Put your no-select class on your container div instead of the table grid.

Note: jQuery UI has an undocumented utility function of its own, instead of using your no-select class, you can just call $('div').disableSelection();.

IE issue:

There is a known issue with jQuery UI 1.7+ which still hasn't been fixed, affecting nested draggables under Internet Explorer. See this bug report. UPDATE: This bug has been fixed in jQuery UI 1.8.16.

The problem basically is that under IE, drag events bubble up on the DOM even if they're handled. A workaround suggested in the comments is to manually cancel event bubbling of the mousedown event on the inner draggables (in your case, your draggable images):

$('img').mousedown(function(e) {
    if($.browser.msie) {
         e.stopPropagation();
    }
});

This is just a hack until it gets fixed, hopefully in jQuery UI 1.9.

IE9 problem: Please also note that under IE9 none of your draggables work for some odd reason.