Skip to content

Commit 52d88a0

Browse files
gregrgaygregrgay
committed
add inaccessible sortable list
1 parent a2307d9 commit 52d88a0

File tree

2 files changed

+186
-0
lines changed

2 files changed

+186
-0
lines changed

‎assets/ik_sortable.js

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
;(function ( $, window, document, undefined ) {
2+
3+
var pluginName = "ik_sortable",
4+
defaults = {};
5+
6+
function Plugin( element, options ) {
7+
8+
this.element = $(element);
9+
this.options = $.extend( {}, defaults, options);
10+
this._defaults = defaults;
11+
this._name = pluginName;
12+
13+
this.init();
14+
}
15+
16+
Plugin.prototype.init = function () {
17+
18+
var $elem, plugin, id, total;
19+
20+
plugin = this;
21+
id = 'sortable_' + $('.ik_sortable').length;
22+
$elem = this.element.attr({
23+
'id': id
24+
})
25+
.wrap('<div class="ik_sortable"></div>').before(plugin.temp);
26+
27+
total = $elem.children('li').length;
28+
29+
plugin.items = $elem.children('li').each( function(i, el) {
30+
31+
$(el).attr({
32+
'draggable': true,
33+
'id': id + '_' + i
34+
});
35+
})
36+
.on('dragstart', {'plugin': plugin}, plugin.onDragStart)
37+
.on('drop', {'plugin': plugin}, plugin.onDrop)
38+
.on('dragend', {'plugin': plugin}, plugin.onDragEnd)
39+
.on('dragenter', {'plugin': plugin}, plugin.onDragEnter)
40+
.on('dragover', {'plugin': plugin}, plugin.onDragOver)
41+
.on('dragleave', {'plugin': plugin}, plugin.onDragLeave);
42+
43+
44+
};
45+
46+
// dragged item
47+
48+
Plugin.prototype.onDragStart = function (event) {
49+
50+
var plugin, $me;
51+
52+
plugin = event.data.plugin;
53+
event = event.originalEvent || event;
54+
$me = $(event.currentTarget);
55+
56+
event.dataTransfer.effectAllowed = 'move';
57+
event.dataTransfer.setData('text', $me.attr('id'));
58+
59+
};
60+
61+
Plugin.prototype.onDrop = function (event) {
62+
63+
var source_id, $me;
64+
65+
event = event.originalEvent || event;
66+
event.preventDefault();
67+
event.stopPropagation();
68+
$me = $(event.currentTarget);
69+
70+
source_id = event.dataTransfer.getData('text');
71+
72+
if(source_id != $me.attr('id')) {
73+
74+
if ($me.hasClass('dropafter')) {
75+
$me.after($('#' + source_id));
76+
} else {
77+
$me.before($('#' + source_id));
78+
}
79+
80+
}
81+
82+
};
83+
84+
Plugin.prototype.onDragEnd = function (event) {
85+
86+
var plugin;
87+
88+
plugin = event.data.plugin;
89+
plugin.element.find('.dragover').removeClass('dragover');
90+
91+
};
92+
93+
// drop target
94+
95+
Plugin.prototype.onDragEnter = function (event) {
96+
97+
$(event.currentTarget).addClass('dragover');
98+
99+
};
100+
101+
Plugin.prototype.onDragOver = function (event) {
102+
103+
var $me, y, h;
104+
105+
event = event.originalEvent || event;
106+
event.preventDefault();
107+
event.dataTransfer.dropEffect = 'move';
108+
109+
$me = $(event.currentTarget);
110+
111+
y = event.pageY - $me.offset().top;
112+
h = $me.outerHeight();
113+
114+
$me.toggleClass('dropafter', y > h / 2);
115+
116+
};
117+
118+
Plugin.prototype.onDragLeave = function (event) {
119+
120+
$(event.currentTarget).removeClass('dragover');
121+
122+
};
123+
124+
Plugin.prototype.resetNumbering = function (plugin) {
125+
126+
plugin.items = plugin.element.children('li');
127+
128+
plugin.items.each( function(i, el) {
129+
var $me = $(el);
130+
});
131+
132+
}
133+
134+
$.fn[pluginName] = function ( options ) {
135+
136+
return this.each(function () {
137+
138+
if ( !$.data(this, pluginName )) {
139+
$.data( this, pluginName,
140+
new Plugin( this, options ));
141+
}
142+
143+
});
144+
145+
}
146+
147+
})( jQuery, window, document );

‎sortable.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>IK Library: Sortable List</title>
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8+
<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">
9+
<script src="assets/ik_utils.js"></script>
10+
<script src="assets/ik_sortable.js"></script>
11+
<script>
12+
13+
$(document).ready(function() {
14+
15+
$(".list").ik_sortable();
16+
17+
});
18+
19+
</script>
20+
</head>
21+
<body>
22+
<main>
23+
<a href="index.html">&larr; Index</a>
24+
<h1>Sortable List</h1>
25+
<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Sed blandit pellentesque felis eget venenatis. Duis venenatis consectetur lacinia. Proin elementum eu justo vel dignissim.</p>
26+
<ul class="list">
27+
<li>Apples</li>
28+
<li>Oranges</li>
29+
<li>Bananas</li>
30+
<li>Pears</li>
31+
<li>Plums</li>
32+
<li>Peaches</li>
33+
<li>Cherries</li>
34+
<li>Persimmons</li>
35+
<li>Quinces</li>
36+
</ul>
37+
</main>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)