关于 Chrome 和 IE 中 .draggable 的两个问题

Question

我正在创建一个游戏板，其中包含可以移动的棋子，所有棋子都使用 .draggable jQuery UI 类。有一些可拖动的游戏块，它们位于网格的桌子顶部。表格和片段都是 div 元素的父级，该元素本身是可拖动的。目标是为玩家提供一个可以四处走动和观看的大型游戏区域。

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

该表在 Firefox 中运行良好。然而，Chrome 和 IE 中出现了两个完全不同的问题，大概是由于我的代码处理元素的方式相同的核心问题。

Chrome： 第一次拖动父 div 后，它的拖动效果很有趣。具体来说，如果您第二次开始拖动它，则在您释放鼠标按钮之前它不会开始拖动。如果您重新加载页面，该问题就会修复，并且只要您将其稍微拖动到网格区域之外，该问题就不会发生。

IE：当您尝试拖动图像时，父 div 和图像会同时拖动，图像会加速以适应 div 的移动。我尝试使用 z-index 来解决这个问题，没有爵士乐。

我尝试过使用多种设置、样式、事件标签来解决此问题，但似乎没有任何方法 100% 有效。感谢您的帮助！

Answer 1

Chrome 问题：

您使用了no-select 类来防止在拖动鼠标事件时进行选择。文档的结构：

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

您将 no-select 类放在表格上，这使您的可拖动图像不受影响。由于浏览器的随机行为，当您通过拖动网格来移动容器时，会创建一个不可见的选择。当您第二次开始拖动时，您实际上开始拖动选定的内容，这导致拖动在鼠标松开时开始。

解决方案：将no-select类放在容器div上而不是表格网格上。

注意： jQuery UI 有一个自己的未记录的实用函数，您只需调用 $('div') 即可，而不是使用 no-select 类。禁用选择（）；。

IE 问题：

jQuery UI 1.7+ 存在一个已知问题，该问题尚未修复，影响 Internet Explorer 下的嵌套可拖动对象。请参阅此错误报告。 更新：此错误已在 jQuery UI 1.8.16 中修复。

问题基本上是在 IE 下，即使处理了拖动事件，拖动事件也会在 DOM 上冒泡。评论中建议的解决方法是手动取消内部可拖动对象（在您的情况下是可拖动图像）上的 mousedown 事件的事件冒泡：

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

这只是一个 hack，直到它得到修复，希望在 jQuery UI 1.9 中。

IE9 问题： 另请注意，在 IE9 下，由于某些奇怪的原因，您的可拖动对象都无法工作。