I have a group of draggable elements displayed using the jQuery UI widget.
During testing in Chrome, everything works perfectly. However, in other browsers, there seem to be issues. It appears that Chrome handles the functionality better compared to other browsers.
If you have an idea of why the jQuery UI sortable widget may be causing issues in non-Chrome browsers, feel free to share. The code and markup are provided below for reference.
Here is the relevant jQuery code snippet (with a test callback function):
$(".editContainer").sortable({
revert: true,
cursor: "move",
stop: function (event, ui) {
$(this).find(".editObjectsTable").each(function () {
console.log($(this).find(".pageOrderNum").text());
});
}
});
Corresponding HTML code snippet:
<div class="editContainer">
<table class="editObjectsTable">
...
</table>
</div>
Here is the relevant CSS code snippet:
div.editContainer
{
width: 94%;
height: 400px;
overflow-y: scroll;
...
}
...
Behavior Summary:
Chrome:
The functionality works perfectly.
IE 10:
Experiences glitches, especially with the jQuery sortable widget. Compatibility with IE is not a priority for this web app.
Firefox:
Issues with text input fields - unable to reposition cursor or highlight text.
Other Browsers:
Compatibility with other browsers is not a priority, but it would be beneficial to work in Firefox as well.
For a live demonstration, you can check out the jsFiddle provided.
Any insights on what might be causing these browser-specific issues?
Additional Info:
The doctype being used is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">