The BrowserPlus DragAndDrop (v1.0) service allows a web developer to make any HTML node a target for native drops of files. The general usage of DragAndDrop is thus:

  1. Developer requires() the DragAndDrop built-in service
  2. DragAndDrop.AddDropTarget() is used to make a HTML entity an active dropzone.
  3. DragAndDrop.AttachCallbacks() indicates which functions should be called when the user hovers over the drop area, and what should be called when the user drops on the zone.
  4. When the end user hovers or drops, the callbacks set are invoked.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<html>
  <head><title>Your first drop target (v1)</title>
  <style type="text/css" media="screen">
    #myTarget { width: 200px; height:200px; border: 1px solid #999; }
  </style>
</head>

<body>
<div id="myTarget"> loading... </div>
<p>
<div id="lastDropDetails"></div>   

<script src="/js/browserplus.js"></script>  
<script>
function setDropAreaText(txt) {
  var div = document.getElementById("myTarget");
  while (div.firstChild) {div.removeChild(div.firstChild);}
  div.appendChild(document.createTextNode(txt));
}

function hovering(hoverOn) {
  if (hoverOn) {setDropAreaText("drop it!");}
  else {setDropAreaText("drag something to me.");}
} 

function dropped(arg) {
  var div = document.getElementById("lastDropDetails");
  while (div.firstChild) {div.removeChild(div.firstChild);}

  var title = document.createElement("b");
  title.innerHTML = "Last drop details:";
  div.appendChild(title);                
  div.appendChild(document.createTextNode(arg.length +
    " files dropped"));
  div.appendChild(document.createElement("p"));
  var lst = document.createElement("ul");

  for (var i = 0; i < arg.length; i++) {
    var item = document.createElement("li");
    var e = document.createTextNode(arg[i].name);
    item.appendChild(e);
    lst.appendChild(item);
  }
  div.appendChild(lst);
}

BrowserPlus.init(function(res) {
  if (res.success) {
   BrowserPlus.require({
      services: [{service: 'DragAndDrop', version: '1'}]},
      function(res) {
        if (res.success) {
          var dnd = BrowserPlus.DragAndDrop;
          dnd.AddDropTarget(
            {id: "myTarget"},
            function(res) {
              dnd.AttachCallbacks({
                id: "myTarget",
                hover: hovering,
                drop: dropped
              },
              function(){});  
            setDropAreaText("drag something to me.");
          });
        } else {
          alert("Error Loading DragAndDrop: " + res.error);
        }
      });
  } else {
    alert("Failed to initialize BrowserPlus: " + res.error);
  }
}); 
</script> 
</body>
</html>
Run Example

DragAndDrop gives javascript a means of attaining opaque FileHandles, which can then be passed to other services, such as ImageAlter. A "FileHandle" is simply a javascript object which contains an opaque numeric identifier of the selected file, and a "display name" in the name property. The latter is simply the filename with path information removed, which makes it meaningful for display to the end user.