Untitled

<body>

  <div id="sortable">
    <?php foreach($data as $row){ ?>
    <div class="alert alert-success" data-id="<?php echo $row['id'] ?>" role="alert"><?php echo $row['div-name']; ?></div>
    <?php } ?>
  </div>

</body>


Sctript part:

<script>
  $( function() {
    var lastMoved = null;
    $("#sortable div").mousedown(function(){
        lastMoved = this;
    });
    $("#sortable").sortable({
      start: function(e, ui) {
        //alert("");
        // console.log("Prev: "+$(this).attr('data-id'));
      },
      update: function(event, ui) {
        alert("Moving: "+$(lastMoved).attr("data-id"));
        alert("Moved to: "+parseInt($(lastMoved).index()+1));
      },
      stop: function(event, ui) {
        var data = "";

        $("#sortable div").each(function(i, el){
            var p = $(el).attr("data-id").toLowerCase().replace(" ", "_");
            data += p+"="+parseInt($(el).index()+1)+",";
        });
        console.log(data.slice(0, -1));

    }
    });
  } );
  </script>