使用jquery-ui draggable将可拖动对象分组

grouping draggable objects with jquery-ui draggable

我想使用可拖动/可拖放的jQuery让用户选择一组对象(每个对象的角落都有一个复选框)，然后将所有选定的对象作为一组拖动...

我一辈子都想不通怎么做哈哈。

我在想的是，这将导致一个可用的解决方案，在每个可拖动对象上，使用start()事件并以某种方式获取所有其他选定对象并将其添加到选择中

出于性能方面的考虑，我还考虑将拖动的对象看起来像一组对象(它们是图像，所以可能是一堆照片)。我认为如果一次拖动几十个对象，使用可拖动功能可能会失败，这听起来是个更好的主意吗？

您可以使用可拖动的helper选项来拖动项目组。

例如，如果您的可拖动对象具有复选框，则可以从帮助程序函数中返回选定的项目，如下所示：

1
2
3
4
5
6
7
8
9
10
11

$('#dragSource li').draggable({
helper: function(){
var selected = $('#dragSource input:checked').parents('li');
if (selected.length === 0) {
selected = $(this);
}
var container = $('').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
});

演示版

我已经设置了一个演示文稿，其中包含可拖动的图像和复选框，布局有些流畅。点击底部的"运行代码段"以查看结果：

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

$(function() {

$('#dragSource li').draggable({
helper: function() {
var selected = $('#dragSource input:checked').parents('li');
if (selected.length === 0) {
selected = $(this);
}
var container = $('').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
});

$('#dropTarget').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(this).append(ui.helper.children());
}
});

$('#selectAll').click(function() {
$('#dragSource input').prop('checked', true);
return false;
});

$('#selectNone').click(function() {
$('#dragSource input').prop('checked', false);
return false;
});

$('#selectInvert').click(function() {
$('#dragSource input').each(function() {
var $this = $(this);
if ($this.prop('checked')) {
$this.prop('checked', false);
} else {
$this.prop('checked', true);
}
});
return false;
});
});

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

body {
font-family: sans-serif;
overflow-x: hidden;
}
div {
margin: 5px;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding: 0;
margin: 0;
float: left;
white-space: nowrap;
}
#selectActions span,
#selectActions li {
float: left;
padding: 5px;
}
.droppableContainer {
width: 48%;
float: left;
min-height: 200px
}
.droppableContainer li {
height: 90px;
width: 110px;
margin: 2px;
background-color: white;
padding-bottom: 4px;
}
.droppableContainer img {
width: 90px;
max-height: 90px;
max-width: 90px;
width: 90px;
vertical-align: middle;
}
.droppableContainer input {
height: 90px;
vertical-align: middle;
}
#draggingContainer {
width: 48%;
}
#draggingContainer input {
visibility: hidden;
}
#dropTarget {
border: 3px dashed grey;
}
#dropTarget input {
visibility: hidden;
}

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205

相关讨论

为此，我创建了一个函数，将slave / master元素提供给该函数，从而为master创建了bind()函数(在这种情况下，我仅允许从master拖动，您可以解决我确定)，这使得奴隶可以使用标准jQuery css跟随它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我想一旦有了一个可行的例子，我就会在此发布更多信息。就目前而言，这为我工作。缺少的是一种将要分组的元素称为重叠(从属，主)的方法。我正在以一种非常特定的方式进行此操作。我敢肯定，您可以聪明地做到这一点。

这正是我想做的事情。到目前为止，我还没有成功，但是我发现这个人以非常复杂的方式做到了。您可以检查出来，也许您可??以这样做。

这应该是可拖动的功能。我希望他们早日实施

绩效理念：

制作一个不可见的"组对象"。选中项目后，将其设为组对象的子级，如果未选中，则将其重新设置为文档主体，静态父级或其他任何子级。您必须平移对象的位置以确保它们不会跳来跳去，还必须在添加/删除对象时将鼠标事件处理程序附加/分离到组的子级上。

当您在任何子项上发生鼠标按下/上移事件时，您将移动的实际上是该组对象。

这应该使整体更简单。