Skip to content

Commit

Permalink
Adjust example for version 0.2.1.
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcojakob
marcojakob committed Jun 17, 2013
1 parent 1c9410d commit 31f1acd
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 220 deletions.
8 changes: 7 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,10 @@ Changelog
* SortableEvent now carries information about the original group of the
dragged element and the new group it was dragged to. This enables
uninstalling in the previous group and installing in the new group.
* Other minor improvements in Sortable.
* Other minor improvements in Sortable.

## Version 0.2.1 (2013-06-17) ##
* Fix Issue #6: Bug in Firefox when dragging over nested elements
* Fix Issue #1: overClass (.dnd-over) stays after drag ended
* Fix Issue #4: Support any HTML Element as drag image
* Fix Issue #5: Always use Drag Image Polyfill for IE9 drags
11 changes: 5 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ HTML5 Drag and Drop for Dart
Helper library to simplify **Native HTML5 Drag and Drop** in Dart.

## Features ##
* Make any HTML Element `Draggable`.
* Create `Dropzone`s and connect them with `Draggable`s.
* Sortable (similar to jQuery UI Sortable).
* Make any HTML Element `draggable`.
* Create `dropzone`s and connect them with `draggable`s.
* `Sortable` (similar to jQuery UI Sortable).
* Uses fast native HTML5 Drag and Drop of the browser.
* Same functionality and API for IE9+, Firefox, Chrome. (Safari and Opera have
not been tested yet, let me know if it works).
* Same functionality and API for IE9+, Firefox, Chrome and Safari.

## Demo ##
See [HTML5 Drag and Drop in action](http://edu.makery.ch/projects/dart-html5-drag-and-drop) (with code examples).
Expand Down Expand Up @@ -54,7 +53,7 @@ I'd like to thank the people who kindly helped me with their answers or put
some tutorial or code examples online. They've already contributed to this
project.

If you'd like to contribute, you're welcome to file issues or
If you'd like to contribute, you're welcome to report issues or
[fork](https://help.github.com/articles/fork-a-repo) my
[repository on GitHub](https://github.com/marcojakob/dart-html5-dnd).

Expand Down
98 changes: 1 addition & 97 deletions example/codeblocks.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,6 @@ codeblockDragImages(Element section) {
</div>
<div class="dragme three">
custom drawn canvas
</div>
<div class="dragme four">
Always uses Polyfill
</div>
''',
// CSS
Expand Down Expand Up @@ -237,17 +234,10 @@ DraggableGroup dragGroupThree = new DraggableGroup()
return new DragImage(canvasImage, 0, 0);
};
DraggableGroup dragGroupFour = new DraggableGroup()
..install(query('#drag-images .four'))
..alwaysUseDragImagePolyfill = true
..dragImageFunction = (Element draggable) {
return new DragImage(canvasImage, 0, 0);
};
// Install dropzone.
DropzoneGroup dropGroup = new DropzoneGroup()
..install(query('#drag-images .dropzone'))
..accept.addAll([dragGroupOne, dragGroupTwo, dragGroupThree, dragGroupFour]);
..accept.addAll([dragGroupOne, dragGroupTwo, dragGroupThree]);
''');
}

Expand Down Expand Up @@ -528,89 +518,3 @@ sortGroup1.accept.addAll([sortGroup1, sortGroup2]);
sortGroup2.accept.addAll([sortGroup1, sortGroup2]);
''');
}

codeblockDraggableSortable(Element section) {
_createCodeblock(section,
// HTML
'''
<ul class="example-box group1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul class="example-box group2">
<li class="empty">Empty list!</li>
</ul>
''',
// CSS
'''
#draggable-sortable {
height: 250px;
}
#draggable-sortable .dnd-placeholder {
border: 1px dashed #CCC;
background: none;
}
#draggable-sortable .dnd-dragging {
opacity: 0.5;
}
#draggable-sortable .dnd-over {
background: #d387ca;
}
#draggable-sortable .group1 li {
cursor: move;
}
#draggable-sortable .group1 {
float: left;
width: 150px;
}
#draggable-sortable .group2 {
float: right;
width: 150px;
}
#draggable-sortable .group2 .empty {
border: 1px dashed #CCC;
color: #333;
}
''',
// Dart
'''
DraggableGroup dragGroup = new DraggableGroup()
..installAll(queryAll('#draggable-sortable .group1 li'));
// Create sortable group with initially no installed elements.
SortableGroup sortGroup = new SortableGroup()
..onSortUpdate.listen((SortableEvent event) {
event.originalGroup.uninstall(event.draggable);
event.newGroup.install(event.draggable);
});
sortGroup.accept.addAll([dragGroup, sortGroup]);
LIElement emptyItem = query('#draggable-sortable .group2 .empty');
// Install an empty item as a dropzone no element is in the list.
DropzoneGroup emptyListDropzone = new DropzoneGroup()
..install(emptyItem)
..accept.add(dragGroup)
..onDrop.listen((DropzoneEvent event) {
// Hide empty item.
emptyItem.style.display = 'none';
// Uninstall in old group and install in new group.
dragGroup.uninstall(event.draggable);
event.draggable.remove();
sortGroup.install(event.draggable);
query('#draggable-sortable .group2').children.add(event.draggable);
});
''');
}
39 changes: 0 additions & 39 deletions example/html5_dnd_example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,43 +384,4 @@ h2 {
#sortable-two-groups .group2 {
float: right;
width: 150px;
}

/* --------------------------------------------------------------------------
* Section: draggable-sortable
* ------------------------------------------------------------------------*/
#draggable-sortable {
height: 250px;
}

#draggable-sortable .dnd-placeholder {
border: 1px dashed #CCC;
background: none;
}

#draggable-sortable .dnd-dragging {
opacity: 0.5;
}

#draggable-sortable .dnd-over {
background: #d387ca;
}

#draggable-sortable .group1 li {
cursor: move;
}

#draggable-sortable .group1 {
float: left;
width: 150px;
}

#draggable-sortable .group2 {
float: right;
width: 150px;
}

#draggable-sortable .group2 .empty {
border: 1px dashed #CCC;
color: #333;
}
45 changes: 3 additions & 42 deletions example/html5_dnd_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ part 'codeblocks.dart';

main() {
// Uncomment to enable logging.
Logger.root.onRecord.listen(new PrintHandler().call);
Logger.root.level = Level.FINEST;
// Logger.root.onRecord.listen(new PrintHandler().call);
// Logger.root.level = Level.FINEST;

// Drag and Drop
sectionDraggableAndDropzone();
Expand All @@ -28,7 +28,6 @@ main() {
sectionSortableListExclude();
sectionSortableListHandles();
sectionSortableTwoGroups();
sectionDraggableSortable();

installCodeblockTabs();
}
Expand All @@ -44,7 +43,6 @@ installCodeblockTabs() {
codeblockSortableListExclude(query('#sortable-list-exclude'));
codeblockSortableListHandles(query('#sortable-list-handles'));
codeblockSortableTwoGroups(query('#sortable-two-groups'));
codeblockDraggableSortable(query('#draggable-sortable'));

List<AnchorElement> tabLinks = queryAll('.example-code .menu li a');
for (AnchorElement link in tabLinks) {
Expand Down Expand Up @@ -149,17 +147,10 @@ sectionDragImages() {
return new DragImage(canvasImage, 0, 0);
};

DraggableGroup dragGroupFour = new DraggableGroup()
..install(query('#drag-images .four'))
..alwaysUseDragImagePolyfill = true
..dragImageFunction = (Element draggable) {
return new DragImage(canvasImage, 0, 0);
};

// Install dropzone.
DropzoneGroup dropGroup = new DropzoneGroup()
..install(query('#drag-images .dropzone'))
..accept.addAll([dragGroupOne, dragGroupTwo, dragGroupThree, dragGroupFour]);
..accept.addAll([dragGroupOne, dragGroupTwo, dragGroupThree]);
}

sectionNestedElements() {
Expand Down Expand Up @@ -254,34 +245,4 @@ sectionSortableTwoGroups() {
// Only accept elements from this section.
sortGroup1.accept.addAll([sortGroup1, sortGroup2]);
sortGroup2.accept.addAll([sortGroup1, sortGroup2]);
}

sectionDraggableSortable() {
DraggableGroup dragGroup = new DraggableGroup()
..installAll(queryAll('#draggable-sortable .group1 li'));

// Create sortable group with initially no installed elements.
SortableGroup sortGroup = new SortableGroup()
..onSortUpdate.listen((SortableEvent event) {
event.originalGroup.uninstall(event.draggable);
event.newGroup.install(event.draggable);
});
sortGroup.accept.addAll([dragGroup, sortGroup]);

LIElement emptyItem = query('#draggable-sortable .group2 .empty');

// Install an empty item as a dropzone no element is in the list.
DropzoneGroup emptyListDropzone = new DropzoneGroup()
..install(emptyItem)
..accept.add(dragGroup)
..onDrop.listen((DropzoneEvent event) {
// Hide empty item.
emptyItem.style.display = 'none';

// Uninstall in old group and install in new group.
dragGroup.uninstall(event.draggable);
event.draggable.remove();
sortGroup.install(event.draggable);
query('#draggable-sortable .group2').children.add(event.draggable);
});
}
45 changes: 11 additions & 34 deletions example/html5_dnd_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ <h1>Dart HTML5 Drag and Drop</h1>
</li>
</ul>
</p>
<p>You are welcome to contribute by reporting an
<a href="https://github.com/marcojakob/dart-html5-dnd/issues">Issue</a>
or <a href="https://help.github.com/articles/fork-a-repo">forking the repository<a/>.
</p>
</div>

<h2>Draggable and Dropzone</h2>
Expand All @@ -61,15 +65,15 @@ <h2>Draggable and Dropzone</h2>

<h2>Dragging Divs</h2>
<p>
All HTML elements with the `draggable="true"` attribute can be dragged -
All HTML elements with the <em>draggable="true"</em> attribute can be dragged -
well...almost. Internet Explorer 9 does not support this attribute and
thus by default only links and images are draggable in IE9. With a decent
thus by default only links and images are draggable in IE9. With a
<a href="http://stackoverflow.com/a/8986075/862411">workaround</a>, we
can also tell IE9 to drag anything. Try the following example in IE9.
</p>
<p>
<strong>Note:</strong> The `draggable="true"` attribute is automatically
added by the `Draggable` class, so there is no need to set it in HTML.
<strong>Note:</strong> The <em>draggable="true"</em> attribute is automatically
added to draggables, so there is no need to set it in HTML.
</p>
<div id="dragging-divs" class="example-container">
<div class="dragme">
Expand Down Expand Up @@ -98,8 +102,7 @@ <h2>Drop Effects</h2>
<h2>Custom Drag Images</h2>
<p>
That was a tough one to make work cross-browser! IE9 and IE10 do not
support setting a custom drag image (as other modern browsers do). IE
always creates a drag image from the element that the user picks up.
support setting a custom drag image (as other modern browsers do).
</p>
<p>
So I had to implement a <strong>polyfill</strong> that draws a custom
Expand All @@ -109,12 +112,7 @@ <h2>Custom Drag Images</h2>
default image does not show, 2. draw the custom image, 3. ensure the mouse
events are passed through to the layer underneath the drag image... more
info in the source).
</p>
<p>
<strong>Note:</strong> The polyfill for drag images is automatically used
if the browser does not support it. But you can use the polyfill for any
browser by setting `alwaysUseDragImagePolyfill = true` on the `Draggable`.
</p>
</p>
<div id="drag-images" class="example-container">
<div class="dropzone example-box">
Drag here!
Expand All @@ -128,9 +126,6 @@ <h2>Custom Drag Images</h2>
<div class="dragme three">
custom drawn canvas
</div>
<div class="dragme four">
Always uses Polyfill
</div>
</div>

<h2>Dropping on Nested Elements</h2>
Expand Down Expand Up @@ -245,28 +240,10 @@ <h2>Two Sortable Groups</h2>
<li class="other">Item 6</li>
</ul>
</div>

<h2>Draggables and a Sortable Group</h2>
<p>
The draggable elements on the left can be dragged into the sortable group
on the right.
</p>
<div id="draggable-sortable" class="example-container">
<ul class="example-box group1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul class="example-box group2">
<li class="empty">Empty list!</li>
</ul>
</div>
</article>

<script type="application/dart" src="html5_dnd_example.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: html5_dnd
version: 0.2.0
version: 0.2.1
author: Marco Jakob <[email protected]>
description: HTML5 Drag and Drop
homepage: https://github.com/marcojakob/dart-html5-dnd
Expand Down

0 comments on commit 31f1acd

Please sign in to comment.