dragOnZone

A plugin to detect drag & drop events.

Usage no npm install needed!

<script type="module">
  import dragOnZone from 'https://cdn.skypack.dev/dragOnZone';
</script>

README

jQuery DragOnZone Build Status Bower Version

Detect drag & drop events outside the Drop Zone.

Usage

  1. Include jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  2. Include plugin's code:

    <script src="your/path/to/dist/jquery.dragonzone.min.js"></script>

  3. Call the plugin:

    $("#dropZone").dragOnZone(options);

Demo

Options

Name Type Default Description
outZone boolean, Dom element, jQuery selector, or jQuery element false By default, outZone is not used. In case you don't define outZone, the functions onDragOutsideStart and onDragOutsideEnd are never fired.
context Object {} You could define the context (e.g. "context: this") inside functions onDragOutsideStart, onDragOutsideEnd, onDragInsideStart, onDragInsideEnd and onDropDone.
debug boolean false Show or hide console logs.
onDragOutsideStart function void function Custom function fired when the mouse starts dragging a file over the element outZone
onDragOutsideEnd function void function Custom function fired when the mouse ends dragging a file over the element outZone
onDragInsideStart function void function Custom function fired when the mouse starts dragging a file over the element dropZone
onDragInsideEnd function void function Custom function fired when the mouse ends dragging a file over the element dropZone
onDropDone function void function This function is executed after dropping the file inside the Drop Zone.