drag-drop list w/ RubaXa.Sortable

lib : https://github.com/RubaXa/Sortable/

<script type='text/javascript' src='jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='Sortable.min.js'></script>
<script type='text/javascript' src='jquery.binding.js'></script>

<script>
$(function ()
	//init list
	$("#foo").sortable({ scroll: true, scrollSensitivity: 30, scrollSpeed: 10 });

	////////////////////////////////////////
	// MODAL SUBMIT aka save &amp; update button
	$('#formMATEDSORT').submit(function(e) {
		e.preventDefault();
	 
		//store the items 1by1
		var arr = new Array();
		var listItems = $("#foo li");
		listItems.each(function(idx, li) {
			var product = $(li);

			arr.push(product.data('rec_id'));
		});

		var formURL = $(this).attr("action");
		
		loading.appendTo($('#formMATEDSORT'));

		$.ajax(
		{
			url : formURL,
			type: "POST",
			data : {arr : arr},
			success:function(data, textStatus, jqXHR)
			{
				console.log(data);
				loading.remove();

				if (data=="00000")
				{
					//close modal
					$('#modalMATED').modal('toggle');
				}
				else
					alert("ERROR");
			},
			error: function(jqXHR, textStatus, errorThrown)
			{
				loading.remove();
				alert("ERROR - connection error");
			}
		});
	});
});

<!-- NEW MATED MODAL &#91;START&#93; -->
<div class="modal fade" id="modalMATEDSORT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&amp;times;
				</button>
				<h4 class="modal-title" >Sort</h4>
			</div>
			<div class="modal-body">
				<form id="formMATEDSORT" role="form" method="post" action="tab_MAted_sort_save.php">

			
					<ul id="foo" class="block__list block__list_words">
					<?php 
						$db_sort = getSet($db, "select * from MAted order by MAted__order_by",null);
						
						foreach($db_sort as $row) {
								echo "<li data-rec_id=" . $row&#91;"MAted_id"&#93; . ">" . $row["MAted_title"] . "</li>";
							}
					?>
					</ul>
					<div class="modal-footer">
						<button id="bntCancel_MATEDSORT" type="button" class="btn btn-default" data-dismiss="modal">
							cancel
						</button>
						<button id="bntSave_MATEDSORT" class="btn btn-primary" type="submit" name="submit">
							save
						</button>
					</div>
                </form>
            </div><!-- End of Modal body -->
        </div><!-- End of Modal content -->
    </div><!-- End of Modal dialog -->
</div><!-- End of Modal -->
<!-- NEW MATED MODAL &#91;END&#93; -->

 
 

//tab_MAted_sort_save.php
<?php
@session_start();

if (!isset($_SESSION&#91;"id"&#93;)) {
	header("Location: index.php");
	exit ;
}

//here is array 🙂
//var_dump($_POST&#91;"arr"&#93;);

//DB
require_once ('config.php');
 
$db = connect();


$arr = $_POST&#91;"arr"&#93;;

$res=null;
for ($i = 0; $i < sizeof($arr); $i++) {
	$res = executeSQL($db,"update MAted set MAted__order_by=? where MAted_id=?",array($i+1,$arr&#91;$i&#93;));
}

echo "00000";

?>

 
 
 
 


Prototype

<script type='text/javascript' src='jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='Sortable.min.js'></script>
<script type='text/javascript' src='jquery.binding.js'></script>
<link href="app.css" rel="stylesheet" type="text/css"/>

<script>
$(function() {


  $("#foo").sortable({ scroll: true, scrollSensitivity: 30, scrollSpeed: 10, 
		onStart: function (evt) {
		//write_items();
			//console.log(evt);
			//console.log(evt.oldIndex);
			//evt.oldIndex;  // element index within parent
		},
		onEnd: function (evt) {
			write_items();
			//console.log(evt);
			//console.log(evt.oldIndex);;  // element's old index within parent
			//console.log(evt.newIndex);  // element's new index within parent
		},
  });
  
  
})

function write_items(){

	var arr = new Array();
	var listItems = $("#foo li");
	listItems.each(function(idx, li) {
		var product = $(li);

		arr.push(product.data('rec_id'));
		//console.log(product.data('rec_id'));
	});
	
	console.log(arr);
}

</script>
<body>
	<ul id="foo" class="block__list block__list_words">
		<li data-rec_id=81>takis</li>
		<li data-rec_id=82>makis</li>
		<li data-rec_id=83>lakis</li>
		<li data-rec_id=84>popay</li>
		<li data-rec_id=85>xman</li>
		<li data-rec_id=86>superfrog</li>
		<li data-rec_id=87>plaisio</li>
		<li data-rec_id=88>samsung</li>
	</ul>

	<button href="#" onclick="write_items()">ASK</button>
</body>

By: |09/09/2015|categories: