jquery-ui 1.9.1 ui-draggable 不适用于 ie9 和 ie10答案

【问题标题】：jquery-ui 1.9.1 ui-draggable not working with ie9 and ie10jquery-ui 1.9.1 ui-draggable 不适用于 ie9 和 ie10
【发布时间】：2013-02-15 21:24:02
【问题描述】：

我无法在 IE 9 和 10 中使 .draggable 工作。使用的主要 javascript 包是： jquery-ui-1.9.1.min.js 和 jquery-1.8.2.min.js

代码基本上是这样的：

creation.texts.resize = function(){

  jQuery('.modification-text.active .creation-resize-handler').draggable({
    start: function(event, ui){
      ... some code ...
    },
    drag: function(event, ui){
      ... lots of code ...
    },
    stop: function(event, ui){

       ... some code ...

      creation.texts.resize();
    }
  });
}

它与chrome firefox等完美配合。有人遇到过类似的问题吗？

更新：我刚刚在 jsfiddle.net 中尝试了一个小示例代码，工作正常。代码挺大的，肯定是其他问题。

更新 2： 似乎可拖动元素不可点击：我在同一页面上做了一些单独的测试，我可以使用 .draggable 就好了。我向错误元素添加了 onclick 警报，它没有在 IE 中触发。这是该区域中元素的示例 html 代码：

<div id="modification-limit" style="left: 25px; top: 34.5px; width: 290px; height: 290px;">
  <div class="modification-text text-active active first-text ui-draggable" id="text_1" style="left: 97px; top: 24px; z-index: 0; border: 1px dashed rgb(204, 204, 204);">
    <img src="/images/creation/rotate.png" class="creation-rotate" style="display: block;">
    <div class="creation-rotate-handler ui-draggable" style="display: block;"></div>
    <img src="/images/creation/resize.png" style="z-index: 100; display: block;" class="creation-resize">     
    <div class="creation-resize-handler ui-draggable" style="z-index: 50000; display: block;" onclick="alert('clicked');">
    </div><img src="/images/creation/close.png" class="creation-close-text" style="display: block;">
    <div> ... </div>
  </div>
</div>

为了简单起见，我删除了很多 html（很多“数据-..”）。希望问题不是我删除的代码的一部分。

【问题讨论】：

有理由不使用最新的 JQueryUI 版本吗？

标签： jquery resize internet-explorer-9 jquery-ui-draggable internet-explorer-10

【解决方案1】：

我有同样的问题，使用 IE10， jQuery 1.8.3 和 JQuery UI 1.9.2

我在运行时创建了一些 div 控件（基于我从 JSON Web 服务加载的数据），并使用 JQuery UI 将它们设置为 Draggable。但是在 IE9 和 IE10 中，它们甚至没有记录应该被拖动。

例如，当用户将鼠标悬停在光标上时，我将光标更改为“移动”光标。

newDivElement.draggable({
   cursor: "move",
   drag: function (event, ui) {
       alert("Hey !  You're dragging !");
   }
   . . . 
});

请原谅陈词滥调，它在 Chrome、Firefox 或带有 Google Chrome Frame 的 IE8 上运行良好。

但是在 IE9 或 IE10 上，当用户将鼠标悬停在这些 div 上时，什么都不会发生。光标没有变化，拖拽功能也没有启动。

出于兴趣/绝望，我尝试了其他地方的建议，在我的 div 和 div 周围的任何其他 HTML 元素上将 -ms-touch-action css 设置为“none”。

没什么区别。

    $(".cssWorkflowStep").css('-ms-touch-action', 'none');
    $(".cssCanvas").css('-ms-touch-action', 'none');
    $(".ui-draggable").css('-ms-touch-action', 'none');
    $("#divCanvasWrapper").css('-ms-touch-action', 'none');
    $("#divWorkflowDiagram").css('-ms-touch-action', 'none');

我还使用 Chrome 的“检查元素”菜单项来检查我的新 div 正在获取这些新的 -ms-touch-action 值，并显示它们是（但 Chrome 正在删除这个 CSS 名称，因为它不知道它是什么）。

我今天过得不好......

我在以下页面找到了解决方案：

IE10 is not Handling Click Events | Help Using MSPointer

（振作起来……这太荒谬了。）

我必须将我的 div 的背景颜色设置为白色......然后让这个背景颜色不可见。然后，IE9 和 IE10 会让我在屏幕上单击或拖动我的 div。

background-color:#FFFFFF; opacity:0;

如果有人需要我，我会在酒吧里哭泣。

【讨论】：

设置背景色：#FFFFFF;可以，但是当我需要使背景颜色透明时（查看浮动 div 下方的内容）如何使其在 IE 9/10 中工作？
达姆！这也为我解决了问题。给我留个位子：|

【解决方案2】：

您的选择中似乎缺少逗号，您尝试过吗？

jQuery('.modification-text.active,.creation-resize-handler').draggable()...

【讨论】：

顺便说一句，这段代码在 IE-9 中运行良好：newhs.appendTo("#canvas").resizable().draggable();
我尝试添加逗号但没有运气。我认为这不是问题，因为它适用于 chrome 和 firefox。不确定我是否理解您的第二条评论。

【解决方案3】：

可能的解决方案：

背景颜色设置为任何颜色（例如白色），如“Mike Gledhill”所述
当您需要 div 的透明背景时，在该 div 内部添加一个 1x1 透明间隔 gif 并将其拉伸以填充整个 div 空间。这将让您拖动透明 gif 文件

【讨论】：

【解决方案4】：

听起来像是“兼容模式”问题。放置在页面<head> 中的这个标签适用于我的情况。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

More on the topic here in this Stack Overflow post.

【讨论】：

【解决方案5】：

将 jquery ui 升级到最新版本（1.11.4）解决了我的问题。

【讨论】：