JSFiddle - React, Tailwind, and code Playground

by gentooboontoo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<h3>Initially <i>non empty</i> horizontal sortable (working)</h1>
<p>
    With the blue handler, drag <b>any but last</b> column toward the last position. It works as expected.
</p>
<ul id="nonemptysortable">
  <li><div class="handler"></div>foobar1</li>
  <li><div class="handler"></div>foobar2</li>
</ul>
<h3>Initially <i>empty</i> horizontal sortable (not working)</h3>
<p>
    With the blue handler, drag <b>any but last</b> column toward the last position
    (<b>taking care to stay over top half of the list</b>)
</p>
<p>
    <b>Expected</b>: displayed placeholder and dragged column moved to last position<br/>
    <b>What happens</b>: Nothing. No placeholder and we can't move second to last column to last position while we keep the pointer in the top half of the list. If we move the pointer onto the bottom half of the list, the change is triggered (but it seems to be another bug).
</p>
<ul id="emptysortable">
</ul>

CSS

ul {
  height: 100px;
  width: 500px;
}

li {
  border: 1px solid black;
  display: block;
  float: left;
  height: 100%;
  margin: 0px 1px;
  /*padding: 0px 5px;*/
  position: relative;
}

li > .handler {
  background: blue;
  cursor: pointer;
  /*display: inline-block;*/
  /*margin-right: 5px;*/
  height: 10px;
  position: absolute;
  top: -10px;
  /*width: 10px;*/
  width: 100%;
}

JavaScript

var $sortable = $("ul").sortable({
  axis: "x",
  handle: ".handler" ,
  revert: 300,
  start: function(event, ui) {
        // Pour éviter que les tracks après le point d'insertion
        // en cours passent en dessous des pistes d'avant
        jQuery('.ui-sortable-placeholder', this).css({
          backgroundColor: '#FFFFC9',
          border: 'dashed 1px #FFCA2B',
          float: 'left',
          visibility: 'visible',
          width: ui.item.width()
        });
      }
});

for(var i = 0; i < 4; i++) {
  $sortable.append("<li><div class='handler'></div>appended</li>");
  //$sortable.sortable("refresh");
}