jquery-ui 1.9.1 ui-draggable not working with ie9 and ie10

Question

I am having trouble making .draggable work in IE 9 and 10. The main javascript packages used are: jquery-ui-1.9.1.min.js and jquery-1.8.2.min.js

The code basically looks like this:

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();
    }
  });
}

It works perfectly fine with chrome firefox etc. Did anyone run into a similar problem?

Update: I just tried a small sample code in jsfiddle.net, works fine. The code is pretty huge, must be some other problem.

Update 2: It appears that the draggable element is not clickable: I did some separate tests on the same page and I can use .draggable just fine. I added a onclick alert to the faulty element, it's not triggering in IE. Here is a sample html code of the elements in that area:

<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>

I removed a lot of html for simplicity (a lot of 'data-..'). Hopefully, the problem is not part of the code I removed.

Is there a reason to not use the last JQueryUI version? – sdespont Feb 17 '13 at 11:06 — sdespont, Feb 17 '13 at 11:06

score 5 · Answer 1 · edited May 23 '17 at 10:27

I'm having the same problem, using IE10, with JQuery 1.8.3 and JQuery UI 1.9.2

I create some div controls at runtime (based on data I've loaded from a JSON web service), and set them as Draggable using JQuery UI. But with IE9 and IE10 they don't even register that they should be dragged.

For example, I make the cursor change to a "move" cursor when the user hovers over it.

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

Excusing the cliche, it works fine on Chrome, Firefox, or IE8 with Google Chrome Frame.

But on IE9 or IE10, nothing happens when the user hovers over these divs. The cursor doesn't change, and the drag function doesn't get kicked off.

Out of interest/desperation, I tried a suggestion from elsewhere, setting the -ms-touch-action css to "none" on my div and any other HTML elements around the div.

It made no difference.

    $(".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');

I also used Chrome's "Inspect Element" menu item, to check that my new divs were getting these new -ms-touch-action values, and it showed they were (but Chrome was then crossing out this css name, as it didn't know what it was).

I'm not having a good day...

I found the solution on the following page:

IE10 is not Handling Click Events | Help Using MSPointer

(Brace yourselves.. this is ridiculous.)

I had to set the background colour of my div to white... then make this background colour invisible. Then, IE9 and IE10 would let me click on, or drag, my divs around the screen.

background-color:#FFFFFF; opacity:0;

If anyone needs me, I'll be in the bar, crying.

Setting background-color:#FFFFFF; works, but when i need to have background color transparent (to see whats below my floating div) how can i make it work in IE 9/10 ? — psulek, Jul 12 '13 at 07:34

score 0 · Answer 2 · answered Feb 15 '13 at 21:27

0

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

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

answered Feb 15 '13 at 21:27

Bob Balfe

48
5

Btw, this code works fine in IE-9: newhs.appendTo("#canvas").resizable().draggable(); – Bob Balfe Feb 15 '13 at 21:28
I tried to add the comma and no luck. I don't think that s the issue since it works on chrome and firefox. Not sure I understand your second comment. – Alex C Feb 15 '13 at 22:25

score 0 · Answer 3 · answered Jul 12 '13 at 07:56

Possible solutions:

With background color set to any color (e.g. white) as mentioned "Mike Gledhill"
When you need transparent background of div, add inside that div use a 1x1 transparent spacer gif and stretch it to fill the entire div space. This will let you drag that transparent gif

score 0 · Answer 4 · edited May 23 '17 at 12:03

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.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 22 '13 at 13:46

Tori Marrama

262
1
2
13

score 0 · Answer 5 · answered Nov 20 '15 at 08:48

0

Upgrade jquery ui to the latest version(1.11.4) solved my problem.

answered Nov 20 '15 at 08:48

Johnny Zhao

2,858
2
29
26

jquery-ui 1.9.1 ui-draggable not working with ie9 and ie10

5 Answers5

Linked