drag-drop list w/ RubaXa.Sortable

Costas · Sep 9, 2015

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

JavaScript:

<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 & 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 [START] -->
<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">
					&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">

			
					[LIST]
					<?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["MAted_id"] . ">" . $row["MAted_title"] . "";
							}
					?>
					[/LIST]
					<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 [END] -->

JavaScript:

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

if (!isset($_SESSION["id"])) {
	header("Location: index.php");
	exit ;
}

//here is array :)
//var_dump($_POST["arr"]);

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


$arr = $_POST["arr"];

$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[$i]));
}

echo "00000";

?>

Prototype

JavaScript:

<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>
	[LIST]
		<li data-rec_id=81>takis
		<li data-rec_id=82>makis
		<li data-rec_id=83>lakis
		<li data-rec_id=84>popay
		<li data-rec_id=85>xman
		<li data-rec_id=86>superfrog
		<li data-rec_id=87>plaisio
		<li data-rec_id=88>samsung
	[/LIST]

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

drag-drop list w/ RubaXa.Sortable

Costas

Administrator