Skip to content
This repository has been archived by the owner on Nov 20, 2018. It is now read-only.

Commit

Permalink
docs(dnd): clean up dnd docs, add note re qqDropTarget
Browse files Browse the repository at this point in the history
closes #1377
[skip ci]
  • Loading branch information
rnicholus committed Apr 1, 2015
1 parent 26762de commit 37584e5
Showing 1 changed file with 38 additions and 33 deletions.
71 changes: 38 additions & 33 deletions docs/features/drag-and-drop.jmd
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@
{{ alert("If you want the contents of any drop zone to be invisible until an item enters the drop zone,
simply ensure a `qq-hide-dropzone` attribute is present on the drop zone container.") }}

Fine Uploader's UI mode has drag & drop support built in. The following contains information about that built-in
support. Near the middle of this page, you can find instructions that will allow you to easily integrate Fine Uploader's
standalone drag & drop module into your project if you are using Fine Uploader's core mode only.
Fine Uploader's UI mode has drag & drop support built in. The following contains information about the standalone
support. Here, you can find instructions that will allow you to easily integrate Fine Uploader's
standalone drag & drop module into your project if you are using Fine Uploader's core mode only. For more information
about the integrated support, see the options and methods in the side nav bar of this page.

{{ alert("If using the integrated drag & drop feature of Fine Uploader UI, a `qqDropTarget` property is added to all `File`
objects dropped into any drop zone. The value of this property points to the actual drop zone element.", "default", "Note") }}

{{ alert("While dragging and dropping of _files_ is supported in many browsers,
Dragging and dropping of _folders_ is currently only supported in Chrome 21+ & Opera 15+", "default", "Note") }}
Expand All @@ -31,7 +35,7 @@ this module.

{{
alert("This module is aimed at Fine Uploader Core mode integrators only. If
you are running this in UI mode, then take a look at the `dragAndDrop` options defined above.", "info")
you are running this in UI mode, then take a look at the `dragAndDrop` Fine Uploader UI option.", "info")
}}

## Options
Expand Down Expand Up @@ -132,6 +136,36 @@ api_event("dropLog", "dropLog",
]) }}

{% markdown %}

## No-Dependency Example

If you are not utilizing jQuery, you can use the plain javascript DnD module. Here is a simple example:

```javascript
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('myDropZone')],
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFiles: function() {
//TODO: display some sort of a "processing" or spinner graphic
},
processingDroppedFilesComplete: function(files, dropTarget) {
//TODO: hide spinner/processing graphic

fineUploaderBasicInstance.addFiles(files); //this submits the dropped files to Fine Uploader
}
}
}),

fineUploaderBasicInstance = new qq.FineUploaderBasic({
request: {
endpoint: "server/uploadHandler"
}
});
```

## jQuery Example

For jQuery users, a jQuery-wrapped DnD module is also available in the combined and minified Fine Uplpoader javascript file.
Expand Down Expand Up @@ -168,35 +202,6 @@ $('#fineUploaderBasicContainer').fineUploader({

{{ alert("jQuery 1.7+ is required to use the `on` function.") }}

## Non-jQuery Example

If you are not utilizing jQuery, you can use the plain javascript DnD module. Here is a simple example:

```javascript
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('myDropZone')],
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFiles: function() {
//TODO: display some sort of a "processing" or spinner graphic
},
processingDroppedFilesComplete: function(files, dropTarget) {
//TODO: hide spinner/processing graphic

fineUploaderBasicInstance.addFiles(files); //this submits the dropped files to Fine Uploader
}
}
}),

fineUploaderBasicInstance = new qq.FineUploaderBasic({
request: {
endpoint: "server/uploadHandler"
}
});
```

[For more information, see the associated blog post](http://blog.fineuploader.com/2013/04/05/standalone-file-drag-drop-module-in-3-5/)

{% endmarkdown %}
Expand Down

0 comments on commit 37584e5

Please sign in to comment.