Handle cloning of SvgElement to create a drag image

Author: marcojakob

lib/src/dnd/draggable.dart

@@ -382,9 +382,6 @@ class DraggableEvent {
  * A drag feedback image. 
  */
 class DragImage {
-  /// A small transparent gif.
-  static const String EMPTY = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-  
   Element element;
   int x;
   int y;
@@ -404,7 +401,8 @@ class DragImage {
 
   /**
    * Constructor to create a [DragImage] for the [draggable]. [draggable]
-   * must be visible in the DOM.
+   * must be visible in the DOM. This is used for browsers that do not natively 
+   * support creating such an image.
    * 
    * [mousePosition] is the mouse coordinate relative to the whole document 
    * (usually the event's page property).
@@ -419,11 +417,22 @@ class DragImage {
     if (draggable is ImageElement) {
       element = new ImageElement(src: draggable.src, 
           width: draggable.width, height: draggable.height);
+    } else if (draggable is svg.SvgSvgElement) {
+      // Is a root <svg> element --> we can just clone it.
+      element = draggable.clone(true);     
+      element.style.pointerEvents = 'none';
+    } else if (draggable is svg.SvgElement) {
+      // Is a child of an <svg> element --> wrap it in an <svg>.
+      element = new svg.SvgElement.tag('svg')
+      ..attributes['width'] = draggable.getBoundingClientRect().width.toString()
+      ..attributes['height'] = draggable.getBoundingClientRect().height.toString()
+      ..append(draggable.clone(true));
+      element.style.pointerEvents = 'none';
     } else {
       element = draggable.clone(true);
-      element.attributes.remove('id');
       element.style.width = draggable.getComputedStyle().width;
       element.style.height = draggable.getComputedStyle().height;
+      print('background: ${element.style.background}');
     }
 
     // Add some transparency like browsers would do for native dragging.

test/svg/svg_test.css

@@ -20,4 +20,12 @@
 
 #drop-within-svg.dnd-over {
   fill: green; 
+}
+
+.draggable {
+  cursor: move;  
+}
+
+.dnd-dragging {
+  opacity: 0.5;
 }

test/svg/svg_test.dart

@@ -21,17 +21,7 @@ main() {
 }
 
 void installSvg() {
-  var svgDragGroup = new DraggableGroup(
-      dragImageFunction: (Element draggable) {
-        var element = new svg.SvgElement.tag('svg')
-            ..attributes = {
-                            'width': '100',
-                            'height': '100'
-            }
-            ..append(draggable.clone(true));
-        return new DragImage(element, 0, 0);
-      }
-  )
+  var svgDragGroup = new DraggableGroup()
   ..install(query('#draggable-svg'));
 
   var divDragGroup = new DraggableGroup()
@@ -45,17 +35,7 @@ void installSvg() {
 }
 
 void installSvgWithin() {
-  var svgDragGroup = new DraggableGroup(
-      dragImageFunction: (Element draggable) {
-        var element = new svg.SvgElement.tag('svg')
-            ..attributes = {
-                            'width': '100',
-                            'height': '100'
-            }
-            ..append(draggable.clone(true));
-        return new DragImage(element, 0, 0);
-      }
-  )
+  var svgDragGroup = new DraggableGroup()
   ..install(query('#drag-within-svg'));
 
   new DropzoneGroup()

test/svg/svg_test.html

@@ -17,7 +17,7 @@ <h3>Draggable SVG</h3>
 
     <div>
       <h3>Draggable Div</h3>
-      <div id="draggable-div"></div>
+      <div id="draggable-div" class="draggable"></div>
     </div>
 
     <div>
@@ -35,8 +35,9 @@ <h3>Div Dropzone</h3>
     <h1>Dragging within an SVG</h1>
     <div>
       <svg width="400" height="420">
-        <rect id="drag-within-svg" width="200" height="100" fill="red"/>
-        <rect id="drop-within-svg" y="120" width="200" height="100" fill="grey"/>
+        <rect id="drag-within-svg" class="draggable" width="100" height="100" fill="red" />
+        <rect id="drop-within-svg" y="120" width="200" height="100" fill="grey" />
+        <rect id="drop-within-svg-inner" y="160" x="10" width="180" height="40" fill="lightgrey" />
       </svg>
     </div>