JSFiddle - React, Tailwind, and code Playground

by DAElectric

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.5/themes/vader/jquery-ui.css">
Drag the Header 0 and notice that it works correctly in all browsers.<br />
Using IE drag and of the child and notice that the associated header moves and the child moves several px away from the cursor.<br />
This works correctly in other browsers.<br />
This works this way regardless of whether or not the subSort has a connectWith<br />


<ul class="parentSort">
    <li class="ui-widget-header ui-corner-all">Header 0
        <ul class="subSort ui-helper-clearfix ui-widget-content">
            <li>child 0.0</li>
            <li>child 0.1</li>
            <li>child 0.2</li>
            <li>child 0.3</li>
            <li>child 0.4</li>
        </ul>
    </li>
    <li class="ui-widget-header ui-corner-all">Header 1
        <ul class="subSort ui-helper-clearfix ui-widget-content" >
            <li>child 1.0</li>
            <li>child 1.1</li>
        </ul>
    </li>
</ul>

CSS

parentSort{}
subSort{}

JavaScript

$(".parentSort").sortable({
    placeholder: "ui-state-highlight"
});
$(".subSort").sortable({
    connectWith: ".subSort",
    placeholder: "ui-state-highlight"
});