Skip to content

Commit 263f4b1

Browse files
author
ufoscout
committed
Added custom drag image on drag
1 parent 01171cb commit 263f4b1

File tree

8 files changed

+94
-22
lines changed

8 files changed

+94
-22
lines changed

‎lib/dragdrop/dragdrop.dart‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,28 @@ class DragDropDataService {
1616
}
1717

1818
@NgInjectableService()
19+
class DragDropConfigService {
20+
DragDropConfig config = new DragDropConfig();
21+
}
22+
1923
class DragDropConfig {
24+
DragImage dragImage;
2025
DataTransferEffect dragEffect = DataTransferEffect.MOVE;
2126
DataTransferEffect dropEffect = DataTransferEffect.MOVE;
2227
String onDragStartClass = "ui-drag-start";
2328
String onDragEnterClass = "ui-drag-enter";
2429
String onDragOverClass = "ui-drag-over";
2530
}
2631

32+
class DragImage {
33+
html.Element imageElement;
34+
int x_offset;
35+
int y_offset;
36+
37+
DragImage(this.imageElement, {this.x_offset : 0, this.y_offset : 0}) {}
38+
39+
}
40+
2741
class DataTransferEffect {
2842

2943
static const COPY = const DataTransferEffect('copy');
@@ -39,7 +53,7 @@ class DataTransferEffect {
3953
class DragDropModule extends Module {
4054
DragDropModule() {
4155
type(DragDropDataService);
42-
type(DragDropConfig);
56+
type(DragDropConfigService);
4357
type(DraggableComponent);
4458
type(DroppableComponent);
4559
}

‎lib/dragdrop/draggable.dart‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,15 @@ class DraggableComponent {
2222
}
2323
@NgOneWay("draggable-data")
2424
var draggableData;
25+
@NgOneWay("dragdrop-config")
26+
set dragdropConfig(DragDropConfig config) {
27+
_dragDropConfig = config;
28+
}
2529
@NgCallback("on-drag-success")
2630
Function onDragSuccessCallback;
2731

28-
DraggableComponent(this._elem, this._dragDropService, this._dragDropConfig) {
32+
DraggableComponent(this._elem, this._dragDropService, DragDropConfigService dragDropConfigService) {
33+
_dragDropConfig = dragDropConfigService.config;
2934
_elem.draggable = _enabled;
3035

3136
_elem.onDragStart.listen((html.MouseEvent event) {
@@ -34,6 +39,12 @@ class DraggableComponent {
3439
if (event.dataTransfer!=null) {
3540
event.dataTransfer.effectAllowed = _dragDropConfig.dragEffect.name;
3641
event.dataTransfer.setData('text/html', '');
42+
43+
if (_dragDropConfig.dragImage!=null) {
44+
DragImage dragImage = _dragDropConfig.dragImage;
45+
event.dataTransfer.setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);
46+
}
47+
3748
}
3849
});
3950
_elem.onDragEnd.listen(_onDragEnd);

‎lib/dragdrop/droppable.dart‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ class DroppableComponent {
1212
@NgCallback("on-drop-success")
1313
Function onDropSuccessCallback;
1414

15-
DroppableComponent(this._elem, this._dragDropService, this._dragDropConfig) {
15+
@NgOneWay("dragdrop-config")
16+
set dragdropConfig(DragDropConfig config) {
17+
_dragDropConfig = config;
18+
}
19+
20+
DroppableComponent(this._elem, this._dragDropService, DragDropConfigService dragDropConfigService) {
21+
_dragDropConfig = dragDropConfigService.config;
1622
_elem.onDragEnter.listen(_onDragEnter);
1723
_elem.onDragOver.listen((html.MouseEvent event) {
1824
_onDragOver(event);

‎test/tests/dragdrop_tests.dart‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ void dragdropTests() {
1111
TestBed _;
1212
Scope scope;
1313
DragDropDataService ddDataService;
14-
DragDropConfig ddConfig;
14+
DragDropConfigService ddConfig;
1515

1616
beforeEach(() {
1717
setUpInjector();
1818
module((Module module) {
1919
module.install(new DragDropModule());
2020
});
21-
inject((TestBed tb, Scope s, DragDropDataService injDragDropDataService,DragDropConfig injDragDropConfig) {
21+
inject((TestBed tb, Scope s, DragDropDataService injDragDropDataService,DragDropConfigService injDragDropConfig) {
2222
_ = tb;
2323
scope = s;
2424
ddDataService = injDragDropDataService;
@@ -86,49 +86,49 @@ void dragdropTests() {
8686
it('Drag events should add/remove the expected classes to the target element', async(inject(() {
8787
dom.Element dragElem = ngQuery(createElement(), '#dragId')[0];
8888

89-
expect(dragElem).not.toHaveClass(ddConfig.onDragStartClass);
89+
expect(dragElem).not.toHaveClass(ddConfig.config.onDragStartClass);
9090
_.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
91-
expect(dragElem).toHaveClass(ddConfig.onDragStartClass);
91+
expect(dragElem).toHaveClass(ddConfig.config.onDragStartClass);
9292
_.triggerEvent(dragElem, 'dragend', 'MouseEvent');
93-
expect(dragElem).not.toHaveClass(ddConfig.onDragStartClass);
93+
expect(dragElem).not.toHaveClass(ddConfig.config.onDragStartClass);
9494

9595
})));
9696

9797
it('Drag start event should not be activated if drag is not enabled', async(inject(() {
9898
dom.Element dragElem = ngQuery(createElement(dragEnabled: false), '#dragId')[0];
9999

100100
expect(ddDataService.draggableData).toBeNull();
101-
expect(dragElem).not.toHaveClass(ddConfig.onDragStartClass);
101+
expect(dragElem).not.toHaveClass(ddConfig.config.onDragStartClass);
102102
_.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
103103
expect(ddDataService.draggableData).toBeNull();
104-
expect(dragElem).not.toHaveClass(ddConfig.onDragStartClass);
104+
expect(dragElem).not.toHaveClass(ddConfig.config.onDragStartClass);
105105

106106
})));
107107

108108
it('Drop events should add/remove the expected classes to the target element', async(inject(() {
109109
Function dropSuccessCallback = (){};
110110
dom.Element dropElem = ngQuery(createElement(dropSuccessCallback:dropSuccessCallback), '#dropId')[0];
111111

112-
expect(dropElem).not.toHaveClass(ddConfig.onDragEnterClass);
113-
expect(dropElem).not.toHaveClass(ddConfig.onDragOverClass);
112+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragEnterClass);
113+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragOverClass);
114114

115115
_.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
116-
expect(dropElem).toHaveClass(ddConfig.onDragEnterClass);
117-
expect(dropElem).not.toHaveClass(ddConfig.onDragOverClass);
116+
expect(dropElem).toHaveClass(ddConfig.config.onDragEnterClass);
117+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragOverClass);
118118

119119
_.triggerEvent(dropElem, 'dragover', 'MouseEvent');
120-
expect(dropElem).toHaveClass(ddConfig.onDragEnterClass);
121-
expect(dropElem).toHaveClass(ddConfig.onDragOverClass);
120+
expect(dropElem).toHaveClass(ddConfig.config.onDragEnterClass);
121+
expect(dropElem).toHaveClass(ddConfig.config.onDragOverClass);
122122

123123
_.triggerEvent(dropElem, 'dragleave', 'MouseEvent');
124-
expect(dropElem).not.toHaveClass(ddConfig.onDragEnterClass);
125-
expect(dropElem).not.toHaveClass(ddConfig.onDragOverClass);
124+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragEnterClass);
125+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragOverClass);
126126

127127
_.triggerEvent(dropElem, 'dragover', 'MouseEvent');
128128
_.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
129129
_.triggerEvent(dropElem, 'drop', 'MouseEvent');
130-
expect(dropElem).not.toHaveClass(ddConfig.onDragEnterClass);
131-
expect(dropElem).not.toHaveClass(ddConfig.onDragOverClass);
130+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragEnterClass);
131+
expect(dropElem).not.toHaveClass(ddConfig.config.onDragOverClass);
132132
})));
133133

134134
it('Drop event should activate the onDropSuccess and onDragSuccess callbacks', async(inject(() {

‎web/dragdrop/dragdrop_demo.dart‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ class Product {
5454
}
5555

5656

57-
58-
5957
@NgController(
6058
selector: '[dd-list-demo-controller]',
6159
publishAs: 'listCtrl')
@@ -72,5 +70,20 @@ class DragDropListDemoController {
7270
void remove(List<String> list, String value) {
7371
list.remove(value);
7472
}
73+
}
74+
75+
76+
@NgController(
77+
selector: '[dd-custom-image-demo-controller]',
78+
publishAs: 'customImageCtrl')
79+
class DragDropCustomImageDemoController {
7580

81+
DragDropConfig dragdropConfig = new DragDropConfig();
82+
83+
DragDropCustomImageDemoController() {
84+
dragdropConfig.dragImage = new DragImage(new dom.ImageElement(src: "dragdrop/smile.jpg"));
85+
dragdropConfig.dropEffect = DataTransferEffect.COPY;
86+
dragdropConfig.dragEffect = DataTransferEffect.COPY;
87+
}
88+
7689
}

‎web/dragdrop/dragdrop_demo.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,5 +76,31 @@ <h4>Drag And Drop - Move from list to list</h4>
7676
</div>
7777
</div>
7878
</div>
79+
80+
<h4>Drag And Drop - Custom Drag Image</h4>
81+
<p><i>Note: custom drag images are not supported in IE9/IE10.</i></p>
82+
<div class="row" dd-custom-image-demo-controller>
7983

84+
<div class="col-sm-3">
85+
<div class="panel panel-info">
86+
<div class="panel-heading">Drag me</div>
87+
<div class="panel-body">
88+
<div class="panel panel-default"
89+
ui-draggable dragdrop-config="customImageCtrl.dragdropConfig">
90+
<div class="panel-body">
91+
I show a custom image on drag
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<div class="col-sm-3">
99+
<div class="panel panel-success" ui-droppable>
100+
<div class="panel-heading">Drop here</div>
101+
<div class="panel-body">
102+
</div>
103+
</div>
104+
</div>
105+
</div>
80106
</div>

‎web/dragdrop/smile.jpg‎

4.07 KB
Loading

‎web/main.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import 'package:angular_ui/angular_ui.dart';
2323
],
2424
override: '*')
2525
import 'dart:mirrors';
26+
import 'package:angular_ui/dragdrop/dragdrop.dart';
2627

2728
part 'accordion/accordion_demo.dart';
2829
part 'alert/alert_demo.dart';
@@ -65,5 +66,6 @@ class DemoModule extends Module {
6566
type(RatingCtrl);
6667
type(DragDropShoppingBasketDemoController);
6768
type(DragDropListDemoController);
69+
type(DragDropCustomImageDemoController);
6870
}
6971
}

0 commit comments

Comments
 (0)