Jquery-ui 1.9.1 ui-draggable doesn't work with ie9 and ie10
I'm having trouble getting .draggable to 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 fine with chrome firefox etc. Has anyone faced a similar problem?
Update: I just tried a little sample code at jsfiddle.net, works great. The code is quite big, there must be some other problem.
Update 2: It looks like the draggable element is not clickable: I've done several separate tests on the same page and I can use .draggable just fine. I added an onclick warning to the faulty element, this doesn't work in IE. Here is an example of the html code of the elements in this 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've removed a lot of html for simplicity (a lot of "data ..."). Hopefully the problem is not part of the code I removed.
source to share
I have the same problem using IE10 with JQuery 1.8.3 and JQuery UI 1.9.2
I am creating some div controls at runtime (based on data loaded from JSON webservice) and setting them as Draggable using JQuery UI. But with IE9 and IE10 they don't even register to be dragged.
For example, I change the cursor to the "move" cursor when the user hovers over it.
newDivElement.draggable({
cursor: "move",
drag: function (event, ui) {
alert("Hey ! You're dragging !");
}
. . .
});
Cliché excuse, it works fine on Chrome, Firefox or IE8 with Google Chrome Frame.
But in IE9 or IE10 nothing happens when the user hovers over these divs. The cursor does not change and the drag function does not start.
Out of interest / desperation, I tried a suggestion from elsewhere by setting the -ms-touch-action css to "none" on my div and any other HTML elements around the div.
It didn't matter.
$(".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 got these new -ms-touch-action values and it showed they were (but Chrome then crossed outside of that css name as it didn't know , What was it).
I'm not having a good day ...
I found the solution on the following page:
IE10 Does Not Handle Click Events | MSPointer Help
(Hold on to yourself .. that's funny.)
I had to set the background color of my div to white ... then make that background color invisible. Then IE9 and IE10 allowed me to click on the div around the screen.
background-color:#FFFFFF; opacity:0;
If someone needs me, I will be at the bar, crying.
source to share
Possible solutions:
- If the background color is set to any color (eg white) as mentioned above, "Mike Gledhill"
- When you want the div's transparent background, add inside so that the div uses a 1x1 transparent divider and stretches it to fill the entire div's space. This will allow you to drag and drop that transparent gif
source to share