drag2.js
4.4 KB
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
var jQuery = require('jquery');
(function($) {
var dragging, placeholders = $();
$.fn.sortable = function(options) {
options = options || {};
return this.each(function() {
if (/^enable|disable|destroy$/.test(options)) {
var items = $(this).children($(this).data('items')).attr('draggable', options == 'enable');
options == 'destroy' && items.add(this)
.removeData('connectWith').removeData('items')
.unbind('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
return;
}
var _self = $(this);
_self.css("height",_self.height());
var index, items = $(this).children(options.items), connectWith = options.connectWith || false;
var dataArray = options.array;
var callBack = options.callback;
console.log(dataArray);
for(var i=0; i<items.length; i++){
$(items[i]).attr("drag-index", i);
items[i]._index = i;
}
var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');
placeholder.css("border","2px dashed red");
var handle = options.handle, isHandle;
items.find(handle).mousedown(function() {
isHandle = true;
}).mouseup(function() {
isHandle = false;
});
var isInput = false;
items.find("input").mousedown(function(){
isInput = true
}).mouseup(function() {
isInput = false;
});
$(this).data('items', options.items)
placeholders = placeholders.add(placeholder);
if (connectWith) {
$(connectWith).add(this).data('connectWith', connectWith);
}
items.attr('draggable', 'true').bind('dragstart.h5s', function(e) {
if(handle && !isHandle) {
return false;
}
if(isInput){
return false;
}
isHandle = false;
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = 'move';
dt.setData('Text', 'dummy');
dragging = $(this).addClass('sortable-dragging');
index = dragging.index();
}).bind('dragend.h5s', function() {
dragging.removeClass('sortable-dragging').fadeIn();
placeholders.detach();
if (index != dragging.index()) {
//拖拽返回排序后的数组
if(dataArray){
var Array = [], sortArray = [];
var itemsUpdate = _self.children(options.items);
for(var i=0; i<itemsUpdate.length; i++){
Array.push(itemsUpdate[i]._index);
}
for(var i=0; i<Array.length; i++){
sortArray.push(dataArray[Array[i]]);
}
if(callBack){
callBack(sortArray);
}
}
//拖拽回调函数
items.parent().trigger('sortupdate');
}
dragging = null;
}).not('a[href], img, input').bind('selectstart.h5s', function() {
this.dragDrop && this.dragDrop();
return false;
}).end().add([this, placeholder]).bind('dragover.h5s dragenter.h5s drop.h5s', function(e) {
if (!items.is(dragging) && connectWith !== $(dragging).parent().data('connectWith')) {
return true;
}
if (e.type == 'drop') {
e.stopPropagation();
placeholders.filter(':visible').after(dragging);
return false;
}
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
if (items.is(this)) {
dragging.hide();
$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
placeholders.not(placeholder).detach();
}
return false;
});
});
};
})(jQuery);