lib : https://github.com/RubaXa/Sortable/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
$(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");
}
});
});
});
<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">
×
</button>
#### Sort
</div>
<div class="modal-body">
<form id="formMATEDSORT" role="form" method="post" action="tab_MAted_sort_save.php">
* " . $row["MAted_title"] . "";
}
?>
<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>
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| //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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
$(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);
}
* takis
* makis
* lakis
* popay
* xman
* superfrog
* plaisio
* samsung
<button href="#" onclick="write_items()">ASK</button>
|
origin - http://www.pipiscrew.com/?p=1902 js-drag-drop-list-w-rubaxa-sortable
