Scrolling creates rows in IE9 on drag and drop items

Question

https://jsfiddle.net/hjcsnrs3/1/

I created the above script to explain my problem. I use jQuery to sort the drag and drop elements horizontally. Works great in Chrome / FF. But in IE, especially IE9, whenever I drag an item, it goes to the next line. Each drop of the drag creates a new row.

$( function() { $( "#sortable" ).sortable({ items: "> div", opacity: 0.8, placeholder: "placeholder", tolerance: "pointer", helper: "original", revert: true, axis: "x" }); $( "#sortable" ).disableSelection(); }); 

Answer 1

I made a local copy in IE for each version. It works great in all versions except IE5. IE5 has the same problem as you mentioned.

CSS Element> Selector Element Supported Below IE7. For element> to work in IE8 and earlier, <!DOCTYPE> must be declared.

change it:

 #sortable >div { float: left; } 

in

 .ui-sortable-handle{float:left;} 

Script update