Adjust example for version 0.2.1.

Author: marcojakob

CHANGELOG.md

@@ -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

README.md

@@ -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).
@@ -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).
 

example/codeblocks.dart

@@ -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
@@ -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]);
   ''');
 }
 
@@ -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);
-});
-  ''');
-}

example/html5_dnd_example.css

@@ -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;
 }

example/html5_dnd_example.dart

@@ -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();
@@ -28,7 +28,6 @@ main() {
   sectionSortableListExclude();
   sectionSortableListHandles();
   sectionSortableTwoGroups();
-  sectionDraggableSortable();
 
   installCodeblockTabs();
 }
@@ -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) {
@@ -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() {
@@ -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);
-  });
 }

example/html5_dnd_example.html

@@ -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>
@@ -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">
@@ -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 
@@ -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!
@@ -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>
@@ -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>

pubspec.yaml

@@ -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