js-list/list-script.js at master · cssmini/js-list · GitHub

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
(function($) {
	$.fn.initList = function(opts) {
		opts = $.extend({}, opts);

		var selectTitle = $(this);
		selectTitle.draggable({
			handle: '.list-title',
			opacity: 0.5,
			helper: 'clone'
		}); // 添加拖拽事件

		/**
		 * 单击列表单击: 改变样式
		 */
		var itemClickHandler = function() {
			if($(this).hasClass('selected-item')) {
				$(this).removeClass('selected-item');
			} else {
				$(this).addClass('selected-item');
			}
		}

		/**
		 * 左边列表项移至右边
		 */
		var leftMoveRight = function() {
			selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
			initItemEvent();
		}

		/**
		 * 右边列表项移至左边
		 */
		var rightMoveLeft = function() {
			selectTitle.find('.list-body .left-box').append($(this).removeClass('selected-item'));
			initItemEvent();
		}

		/**
		 * 初始化列表项选择事件
		 */
		function initItemEvent() {
			// 左边列表项单击、双击事件
			selectTitle.find('.list-body .left-box').find('.item').unbind('click');
			selectTitle.find('.list-body .left-box').find('.item').unbind('dblclick');
			selectTitle.find('.list-body .left-box').find('.item').each(function() {
				$(this).on("click", itemClickHandler);
				if(!!opts.openDblClick) {
					$(this).on('dblclick', leftMoveRight);
				}
			});

			// 右边列表项单击、双击事件
			selectTitle.find('.list-body .right-box').find('.item').unbind('click');
			selectTitle.find('.list-body .right-box').find('.item').unbind('dblclick');
			selectTitle.find('.list-body .right-box').find('.item').each(function() {
				$(this).on('click', itemClickHandler);
				if(!!opts.openDblClick) {
					$(this).on('dblclick', rightMoveLeft);
				}
			});
		}

		/**
		 * 获取选择的值
		 * @return json数组
		 */
		function getSelectedValue() {
			var rightBox = selectTitle.find('.list-body .right-box');
			var itemValues = [];
			var itemValue;

			rightBox.find('.item').each(function() {
				itemValue = {};
				itemValue[$(this).attr('data-id')] = $(this).text();
				itemValues.push(itemValue);
			});

			for(var i = 0; i < itemValues.length; i++) {
				console.log(itemValues[i]);
			}

			return itemValues;
		}

		/**
		 * 初始化添加、移除、获取值按钮事件
		 */
		function initBtnEvent() {
			var btnBox = selectTitle.find('.list-body .center-box');
			var leftBox = selectTitle.find('.list-body .left-box');
			var rightBox = selectTitle.find('.list-body .right-box');

			// 添加一项
			btnBox.find('.add-one').on('click', function() {
				rightBox.append(leftBox.find('.selected-item').removeClass('selected-item'));
			});
			// 添加所有项
			btnBox.find('.add-all').on('click', function() {
				rightBox.append(leftBox.find('.item').removeClass('selected-item'));
			});
			// 移除一项
			btnBox.find('.remove-one').on('click', function() {
				leftBox.append(rightBox.find('.selected-item').removeClass('selected-item'));
			});
			// 移除所有项
			btnBox.find('.remove-all').on('click', function() {
				leftBox.append(rightBox.find('.item').removeClass('selected-item'));
			});

			selectTitle.find('.list-footer').find('.selected-val').on('click', getSelectedValue);
		}

		initItemEvent();
		initBtnEvent();

		if(!!opts.openDrag) {
			$('.item-box').sortable({
				placeholder: 'item-placeholder',
				connectWith: '.item-box',
				revert: true
			}).droppable({
				accept: '.item',
				hoverClass: 'item-box-hover',
				drop: function(event, ui) {
					setTimeout(function() {
						ui.draggable.removeClass('selected-item');
					}, 500);
				}
			}).disableSelection();
		}
	}
})($)