JSFiddle - React, Tailwind, and code Playground

by Jedaias Rodrigues

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="conteudo">

  <div id="item1" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p>1</p>
    </div>
  </div>

  <div id="item2" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p>2</p>
    </div>
  </div>

  <div id="item3" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p>3</p>
    </div>
  </div>

  <div id="item4" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p>4</p>
    </div>
  </div>

</div>

CSS

.item { width: 100%; height: 90px; border: 1px solid black;}
  .item:hover {
    border: 3px solid black;
  }
  #conteudo { width: 95%; height:500px; border:2px solid #ccc; padding: 10px; }
  .ico {
    float: left;
    width: 3%;
    border: 2px solid #fff000;
    cursor: move;
  }
  .conteudoItem{
    float: left;
    width: 90%;
    /* border: 2px solid #fff000 */
  }

JavaScript

$(function() {

    $("#conteudo").sortable({
      axis: 'y',
      start: function(event, ui) {
        ui.item.startPos = ui.item.index();
    },
      update: function(event, ui){
        alert("Posição inicial: " + ui.item.startPos + " Nova posição: " + ui.item.index());
        alert("O id do item é: " + ui.item);
      }
    });

    $("#conteudo").disableSelection();

  });