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(很多'data- ..').希望问题不是我删除的代码的一部分.

Answer 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 !");
   }
   . . . 
});

令人烦恼的是,它适用于使用Google Chrome Frame的Chrome,Firefox或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的"Inspect Element"菜单项,检查我的新div 是否获得了这些新的-ms-touch-action值,并且显示它们是(但是当时Chrome已经删除了这个css名称,因为它没有知道它是什么).

我没有美好的一天......

我在下一页找到了解决方案:

IE10不处理点击事件| 帮助使用MSPointer

(支持你自己......这太荒谬了.)

我不得不将div的背景颜色设置为白色......然后使这种背景颜色不可见.然后,IE9和IE10会让我点击或拖动屏幕周围的div.

background-color:#FFFFFF; opacity:0;

如果有人需要我,我会在酒吧,哭.