jquery-ui 1.9.1 ui-draggable not working with ie9

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.

Answer 1

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

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

Answer 2

Possible solutions:

1. With background color set to any color (e.g. white) as mentioned "Mike Gledhill"
2. 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

Answer 3

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.

Answer 4

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.

Answer 5

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