added HTML5 DnD example to js mode

javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js

@@ -0,0 +1,99 @@
+window.onload = function () {
+    tryLinkSketch();
+}
+
+function tryLinkSketch() {
+    var sketchId = "wordDroppings";
+    var sketch = Processing.getInstanceById(sketchId);
+    if ( sketch == undefined )
+        return setTimeout(tryLinkSketch, 200); /*try again later*/
+    else {
+        initDragDrop(sketch);
+    }
+}
+
+function initDragDrop ( sketch ) {
+  var target = sketch.externals.canvas;
+  var targetPosition = getElementPosition(target);
+  var messageType = 'text/plain';
+    
+  var links = document.querySelectorAll('a'), el = null;
+  for (var i = 0; i < links.length; i++) {
+    el = links[i];
+  
+    el.setAttribute('draggable', 'true');
+  
+    addEvent(el, 'dragstart', function (e) {
+      e.dataTransfer.effectAllowed = 'copy';
+      var message = this.textContent || this.innerHTML;
+      e.dataTransfer.setData( messageType, message );
+      return false;
+    });
+  }
+  
+  addEvent( target, 'dragenter', function (e) {
+      if (e.preventDefault) e.preventDefault();
+      sketch.dragEnter();
+      return false;
+  });
+  
+  addEvent( target, 'dragover', function (e) {
+      if (e.preventDefault) e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+      sketch.dragOver( e.pageX-targetPosition.x, 
+                       e.pageY-targetPosition.y );
+      return false;
+  });
+
+  addEvent( target, 'dragleave', function () {
+    sketch.dragLeave();
+  });
+
+  addEvent( target, 'drop', function (e) {
+      if (e.stopPropagation) e.stopPropagation();
+      if (e.preventDefault) e.preventDefault();
+      sketch.dragDrop( e.dataTransfer.getData(messageType), 
+                       e.pageX-targetPosition.x, 
+                       e.pageY-targetPosition.y );
+      return false;
+  });
+}
+
+// see: http://html5demos.com/drag
+var addEvent = (function () {
+  if (document.addEventListener) {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.addEventListener(type, fn, false);
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  } else {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  }
+})();
+
+// see: http://www.quirksmode.org/js/findpos.html
+function getElementPosition (obj) {
+    var curleft = curtop = 0;
+    if (obj.offsetParent) {
+        do {
+            curleft += obj.offsetLeft;
+            curtop  += obj.offsetTop;
+        } while (obj = obj.offsetParent);
+        return {x:curleft,y:curtop};
+    }
+    return undefined;
+}
+

javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde

@@ -0,0 +1,80 @@
+/**
+ *    Drag one of the links below into the sketch window!      <br/>
+ *    (Opera currently not supported, sorry!)
+ */
+ 
+color normalColor;
+color dragColor;
+color currentColor;
+
+int nx = -10, ny = -10;
+int cx = -10, cy = -10;
+
+ArrayList trail;
+
+String message;
+
+void setup ()
+{
+    size( 300, 200 );
+    
+    normalColor = color(100);
+    dragColor = color(200);
+    currentColor = normalColor;
+    
+    trail = new ArrayList();
+}
+
+void draw ()
+{
+    background(100);
+    
+    noFill();
+    stroke(currentColor);
+    strokeWeight(5);
+    rect(2.5,2.5,width-5,height-5);
+    
+    strokeWeight(1);
+    if ( trail.size() > 2 )
+    {
+        for ( int i = 1; i < trail.size(); i++ )
+        {
+            stroke(map(i,1,trail.size(),100,0));
+            line( trail.get(i-1)[0], trail.get(i-1)[1], 
+                  trail.get(i)[0],   trail.get(i)[1] );
+        }
+        trail.remove(trail.get(0));
+    }
+    
+    noStroke();
+    fill(255);
+    cx += (nx-cx) / 10.0;
+    cy += (ny-cy) / 10.0;
+    ellipse( cx, cy, 7, 7 );
+    text( message, cx+7.5, cy+2.5 );
+}
+
+void dragEnter ()
+{
+    currentColor = dragColor;
+    trail = new ArrayList();
+}
+
+void dragOver ( int dragX, int dragY )
+{
+    trail.add(new int[]{dragX,dragY});
+}
+
+void dragLeave ()
+{
+    currentColor = normalColor;
+}
+
+void dragDrop ( String dropMessage, int dropX, int dropY )
+{
+    message = dropMessage;
+    nx = dropX;
+    ny = dropY;
+    
+    currentColor = normalColor;
+}