https://www.afrocharts.com/js/sortable/jquery.sortable.1.js

1/*
2 * HTML5 Sortable jQuery Plugin
3 * http://farhadi.ir/projects/html5sortable
4 * 
5 * Copyright 2012, Ali Farhadi
6 * Released under the MIT license.
7 */
8(function($) {
9var dragging, placeholders = $();
10$.fn.sortable = function(options) {
11	var method = String(options);
12	options = $.extend({
13		connectWith: false
14	}, options);
15	return this.each(function() {
16		if (/^enable|disable|destroy$/.test(method)) {
17			var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
18			if (method == 'destroy') {
19				items.add(this).removeData('connectWith items')
20					.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
21			}
22			return;
23		}
24		var isHandle, index, items = $(this).children(options.items);
25		var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
26		items.find(options.handle).mousedown(function() {
27			isHandle = true;
28		}).mouseup(function() {
29			isHandle = false;
30		});
31		$(this).data('items', options.items)
32		placeholders = placeholders.add(placeholder);
33		if (options.connectWith) {
34			$(options.connectWith).add(this).data('connectWith', options.connectWith);
35		}
36		items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
37			if (options.handle && !isHandle) {
38				return false;
39			}
40			isHandle = false;
41			var dt = e.originalEvent.dataTransfer;
42			dt.effectAllowed = 'move';
43			dt.setData('Text', 'dummy');
44			index = (dragging = $(this)).addClass('sortable-dragging').index();
45		}).on('dragend.h5s', function() {
46			if (!dragging) {
47				return;
48			}
49			dragging.removeClass('sortable-dragging').show();
50			placeholders.detach();
51			if (index != dragging.index()) {
52				dragging.parent().trigger('sortupdate', {item: dragging});
53			}
54			dragging = null;
55		}).not('a[href], img').on('selectstart.h5s', function() {
56			this.dragDrop && this.dragDrop();
57			return false;
58		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
59			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
60				return true;
61			}
62			if (e.type == 'drop') 
63			{
64				var index=1;
65				
66				e.stopPropagation();
67				placeholders.filter(':visible').after(dragging);
68				dragging.trigger('dragend.h5s');
69				
70				//update order number
71				//get all li fields
72				var allListItmes =$("#albumSongs").find("li"); 
73				
74				//go through
75				allListItmes.each(function()
76				{
77					//check if this input was update
78					//get original positiom
79					var count = $(this).attr("count");
80
81					
82					if (typeof count ==="undefined") {}
83					
84					else
85					{	
86						//update 
87						$("#albumSongOrder_"+count).html(index);
88						
89						//increment
90						index = index+1;
91					}
92					
93				});	
94				
95				return false;
96			}
97			e.preventDefault();
98			e.originalEvent.dataTransfer.dropEffect = 'move';
99			if (items.is(this)) {
100				if (options.forcePlaceholderSize) {
101					placeholder.height(dragging.outerHeight());
102				}
103				dragging.hide();
104				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
105				placeholders.not(placeholder).detach();
106			} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
107				placeholders.detach();
108				$(this).append(placeholder);
109			}
110			return false;
111		});
112	});
113};
114})(jQuery);