Drag and Drop Touch

This sample is based on the html5rocks page at http://www.html5rocks.com/en/tutorials/dnd/basics/ .

The original sample uses HTML5 drag and drop events, and therefore works only with the mouse.

This version uses the DragDropTouch polyfill so you should be able to drag the rectangles to new positions using the mouse or touch.

Input
TextArea
Select
Image
grapefruit

testing

Works with FlexGrid

Drag columns to new positions using the mouse or touch:

Drag columns here to create groups
Id
Product
Country
Sales
Inquiries
0
Alpina
USA
73
647
1
Gumpert
UK
111
238
2
Isdera
Japan
97
655
3
Keinath
Germany
107
589
4
Adler
USA
70
501
5
Borgward
UK
22
967
6
Alpina
Japan
73
127
7
Gumpert
Germany
98
289
8
Isdera
USA
113
744
9
Keinath
UK
25
501
10
Adler
Japan
27
131
11
Borgward
Germany
94
563
12
Alpina
USA
83
894
13
Gumpert
UK
119
795
14
Isdera
Japan
84
432
15
Keinath
Germany
84
995
16
Adler
USA
38
937
17
Borgward
UK
54
539
18
Alpina
Japan
24
846
19
Gumpert
Germany
116
971
20
Isdera
USA
63
155
21
Keinath
UK
96
717
22
Adler
Japan
100
1,045
23
Borgward
Germany
64
625
24
Alpina
USA
23
765
25
Gumpert
UK
34
384
26
Isdera
Japan
75
486
27
Keinath
Germany
61
655
28
Adler
USA
70
968
29
Borgward
UK
30
193
30
Alpina
Japan
24
237
31
Gumpert
Germany
89
575
32
Isdera
USA
29
708
33
Keinath
UK
22
337
34
Adler
Japan
66
107
35
Borgward
Germany
89
987
36
Alpina
USA
58
531
37
Gumpert
UK
113
787
38
Isdera
Japan
38
940
39
Keinath
Germany
102
1,065
40
Adler
USA
101
338
41
Borgward
UK
69
922
42
Alpina
Japan
89
725
43
Gumpert
Germany
21
329
44
Isdera
USA
78
762
45
Keinath
UK
30
988
46
Adler
Japan
53
872
47
Borgward
Germany
117
291
48
Alpina
USA
39
924
49
Gumpert
UK
53
891
50
Isdera
Japan
46
391
51
Keinath
Germany
91
175
52
Adler
USA
54
537
53
Borgward
UK
81
599
54
Alpina
Japan
63
129
55
Gumpert
Germany
84
903
56
Isdera
USA
38
457
57
Keinath
UK
31
939
58
Adler
Japan
34
736
59
Borgward
Germany
30
1,059
60
Alpina
USA
79
1,069
61
Gumpert
UK
108
285
62
Isdera
Japan
107
765
63
Keinath
Germany
70
781
64
Adler
USA
102
809
65
Borgward
UK
28
576
66
Alpina
Japan
73
204
67
Gumpert
Germany
109
385
68
Isdera
USA
104
945
69
Keinath
UK
113
264
70
Adler
Japan
43
967
71
Borgward
Germany
111
554
72
Alpina
USA
90
900
73
Gumpert
UK
112
545
74
Isdera
Japan
53
985
75
Keinath
Germany
31
1,068
76
Adler
USA
43
968
77
Borgward
UK
21
345
78
Alpina
Japan
51
271
79
Gumpert
Germany
56
828
80
Isdera
USA
54
608
81
Keinath
UK
74
421
82
Adler
Japan
22
651
83
Borgward
Germany
58
394
84
Alpina
USA
64
132
85
Gumpert
UK
53
354
86
Isdera
Japan
112
106
87
Keinath
Germany
30
983
88
Adler
USA
99
277
89
Borgward
UK
73
285
90
Alpina
Japan
22
343
91
Gumpert
Germany
117
293
92
Isdera
USA
38
476
93
Keinath
UK
77
815
94
Adler
Japan
39
182
95
Borgward
Germany
39
201
96
Alpina
USA
97
739
97
Gumpert
UK
62
769
98
Isdera
Japan
107
947
99
Keinath
Germany
118
1,053
Id
Product
Country
Sales
Inquiries
0
Alpina
USA
73
647
1
Gumpert
UK
111
238
2
Isdera
Japan
97
655
3
Keinath
Germany
107
589
4
Adler
USA
70
501
5
Borgward
UK
22
967
6
Alpina
Japan
73
127
7
Gumpert
Germany
98
289
8
Isdera
USA
113
744
9
Keinath
UK
25
501
10
Adler
Japan
27
131
11
Borgward
Germany
94
563
12
Alpina
USA
83
894
13
Gumpert
UK
119
795
14
Isdera
Japan
84
432
15
Keinath
Germany
84
995
16
Adler
USA
38
937
17
Borgward
UK
54
539
18
Alpina
Japan
24
846
19
Gumpert
Germany
116
971
20
Isdera
USA
63
155
21
Keinath
UK
96
717
22
Adler
Japan
100
1,045
23
Borgward
Germany
64
625
24
Alpina
USA
23
765
25
Gumpert
UK
34
384
26
Isdera
Japan
75
486
27
Keinath
Germany
61
655
28
Adler
USA
70
968
29
Borgward
UK
30
193
30
Alpina
Japan
24
237
31
Gumpert
Germany
89
575
32
Isdera
USA
29
708
33
Keinath
UK
22
337
34
Adler
Japan
66
107
35
Borgward
Germany
89
987
36
Alpina
USA
58
531
37
Gumpert
UK
113
787
38
Isdera
Japan
38
940
39
Keinath
Germany
102
1,065
40
Adler
USA
101
338
41
Borgward
UK
69
922
42
Alpina
Japan
89
725
43
Gumpert
Germany
21
329
44
Isdera
USA
78
762
45
Keinath
UK
30
988
46
Adler
Japan
53
872
47
Borgward
Germany
117
291
48
Alpina
USA
39
924
49
Gumpert
UK
53
891
50
Isdera
Japan
46
391
51
Keinath
Germany
91
175
52
Adler
USA
54
537
53
Borgward
UK
81
599
54
Alpina
Japan
63
129
55
Gumpert
Germany
84
903
56
Isdera
USA
38
457
57
Keinath
UK
31
939
58
Adler
Japan
34
736
59
Borgward
Germany
30
1,059
60
Alpina
USA
79
1,069
61
Gumpert
UK
108
285
62
Isdera
Japan
107
765
63
Keinath
Germany
70
781
64
Adler
USA
102
809
65
Borgward
UK
28
576
66
Alpina
Japan
73
204
67
Gumpert
Germany
109
385
68
Isdera
USA
104
945
69
Keinath
UK
113
264
70
Adler
Japan
43
967
71
Borgward
Germany
111
554
72
Alpina
USA
90
900
73
Gumpert
UK
112
545
74
Isdera
Japan
53
985
75
Keinath
Germany
31
1,068
76
Adler
USA
43
968
77
Borgward
UK
21
345
78
Alpina
Japan
51
271
79
Gumpert
Germany
56
828
80
Isdera
USA
54
608
81
Keinath
UK
74
421
82
Adler
Japan
22
651
83
Borgward
Germany
58
394
84
Alpina
USA
64
132
85
Gumpert
UK
53
354
86
Isdera
Japan
112
106
87
Keinath
Germany
30
983
88
Adler
USA
99
277
89
Borgward
UK
73
285
90
Alpina
Japan
22
343
91
Gumpert
Germany
117
293
92
Isdera
USA
38
476
93
Keinath
UK
77
815
94
Adler
Japan
39
182
95
Borgward
Germany
39
201
96
Alpina
USA
97
739
97
Gumpert
UK
62
769
98
Isdera
Japan
107
947
99
Keinath
Germany
118
1,053

Works with PivotPanel

Drag fields to new build pivot tables using the mouse or touch:

Wijmo License

The Wijmo license in this application is not set.

If you are a customer, you can create a license online. Otherwise, you can generate a 30-day license for free. For further assistance, contact MESCIUS: us.sales@mescius.com.

Wijmo Evaluation Version (5.20251.34)