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

Posted 2023-05-08

【中文标题】关于 Chrome 和 IE 中的 .draggable 的两个问题

【英文标题】：Two question regarding .draggable in Chrome and IE

【发布时间】：2011-08-11 15:17:12

【问题描述】：

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

网址：http://shionyr.com/gamekeeper/dragger.php

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

Chrome：第一次拖动后，父 div 拖动很有趣。具体来说，如果您再次开始拖动它，它不会开始拖动，直到您释放 鼠标按钮。如果您重新加载页面，该问题会得到解决，并且只要您稍微拖动到网格区域之外就不会发生此问题。

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

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

【问题讨论】：

+1，这个问题发现了一些有趣的问题。

【参考方案1】：

Chrome 问题：

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

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

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

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

注意： jQuery UI 有它自己的一个未记录的实用函数，而不是使用你的 no-select 类，你可以调用 $('div').disableSelection();。

IE 问题：

jQuery UI 1.7+ 存在一个已知问题，该问题仍未修复，影响 Internet Explorer 下的嵌套可拖动项。见this bug report。 更新：此错误已在 jQuery UI 1.8.16 中修复。

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

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

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

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

【讨论】：

@Tom Murray：请注意，错误 #4333 刚刚在 jQuery UI 1.8.16 中得到修复