JSFiddle - React, Tailwind, and code Playground

by jeremyfrank

HTML

<p>In the jQuery UI Sortable list below, the &quot;drag handle&quot; retains its :hover state after sorting in IE9 (when you drop the item in a position where the cursor will not be over the handle after sorting).</p>
<ol class="sortable-list">
    <li>
        Name 1 <i class="handle">handle</i>
    </li>
    <li>
        Name 2 <i class="handle">handle</i>
    </li>
    <li>
        Name 3 <i class="handle">handle</i>
    </li>
    <li>
        Name 4 <i class="handle">handle</i>
    </li>
</ol>

CSS

body {
    padding: 10px;
}
.sortable-list {
    border: 1px solid #777;
    margin: 1em 0;
}
.sortable-list li {
    border-top: 1px solid #777;
    line-height: 20px;
    padding: 5px;
    position: relative;
}
.sortable-list li:first-child {
    border-top: 0;
}
.handle {
    background: #ccc;
    cursor: pointer;
    display: block;
    height: 20px;
    right: 5px;
    padding: 0 5px;
    position: absolute;
    top: 5px;
    xwidth: 20px;
}
.handle:hover {
    background: #f00;
}
.drop-placeholder {
    background: #ff9;
    height: 30px;
}
.ui-sortable-helper {
    background: #9ff;
    border: 0 !important;
}

JavaScript

$('.sortable-list').sortable({
    handle: '.handle',
    placeholder: 'drop-placeholder',
    stop: function(event, ui) {
        // force a repaint for IE, doesn't work
        // $(ui.item).css('padding', '5px');
        // $('body').addClass('repaint').removeClass('repaint');
        
        // apply a bg color, and remove it, nope
        // $(ui.item).find('.handle').css('backgroundColor', 'none');
        // $(ui.item).find('.handle').removeAttr('style');

        // trigger a mouseover on the handle, nada
        // $(ui.item).find('.handle').trigger('mouseover');
    }
});