3

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

4

5 回答 5

5

我有同样的问题，使用 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 不处理点击事件 | 帮助使用 MSPointer

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

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

background-color:#FFFFFF; opacity:0;

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

于 2013-04-09T13:25:13.817 回答
0

Looks like you are missing the comma's in your selection, did you try this?

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

于 2013-02-15T21:27:58.577 回答
0

可能的解决方案：

  1. 背景颜色设置为任何颜色（例如白色），如“Mike Gledhill”所述
  2. 当您需要 div 的透明背景时，在该 div 内添加使用 1x1 透明间隔 gif 并将其拉伸以填充整个 div 空间。这将让你拖动那个透明的 gif
于 2013-07-12T07:56:46.927 回答
0

Sounds like a "compatibility mode" issue. This tag placed in the page <head> worked for my situation. 

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

More on the topic here in this Stack Overflow post.

于 2013-10-22T13:46:44.620 回答
0

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

于 2015-11-20T08:48:40.873 回答