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

Question

我在 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(很多“数据..”)。希望问题不是我删除的代码的一部分。

Answer 1

我也遇到同样的问题，使用 IE10jQuery 1.8.3和 JQuery UI 1.9.2

我在运行时创建了一些 div 控件(基于从 JSON Web 服务加载的数据)，并使用 JQuery UI 将它们设置为可拖动。但对于 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;

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