@matrx/dragster

@matrx/dragster

@matrx/dragster is a port of Ben Smithett's dragster to ES6. It wraps the native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.

Differences from the original

• Has been converted from CoffeeScript to JavaScript
• Has had its events renamed to 'dragster-enter' and 'dragster-leave'
• Uses ES6 Class
• Keeps track of its instances for later reference so your drop callback has a way to call reset()
• Provides a destroy() method that can be used as a callback to remove said instances. If you use this with Svelte's use: directive, then Svelte will automatically call destroy() as something is removed from the DOM.

Usage

To install with npm

npm install --save @matrx/dragster

In a .svelte file

<script>
  import {Dragster} from '@matrx/dragster'

  function addDragster(node) {
    return new Dragster(node)
  }

  let thingBeingDragged

  function dragStart(event) {
    thingBeingDragged = event.target.id
    event.target.style.opacity = .5
  }

  function drop(event) {
    const id = event.target.id
    Dragster.reset(event.target)  // Very important!
    console.log('id of drop zone', id)
    console.log('id of thing being dragged', thingBeingDragged)
  }

  function enter(event) {
    event.target.style.background = 'grey'
  }

  function leave(event) {
    event.target.style.background = '' 
  }

  function over(event) {  
    event.preventDefault()  // Very important!
  }

  function dragEnd(event) {
    event.target.style.opacity = ""
  }
</script>

<style>
  .draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: blue;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    text-align: center;
    background: purple;
  }
</style>

<div use:addDragster id="must-be-unique" class="dropzone" on:drop={drop} on:dragster-enter={enter} on:dragster-leave={leave} on:dragover={over}>
  Drop something on me
</div>

<div id='must-also-be-unique' draggable='true' class="draggable" on:dragstart={dragStart} on:dragend={dragEnd}>
  Drag me
</div>

React's JSX and I suspect Angular, Vue, etc. have a similar syntax to above. In JSX, it's onDragster-start. You may also have to create Dragster instances yourself if your UI tech doesn't have the equivalent to Svelte's use: and you should probably manually call destroy().

Plain HTML/JavaScript is essentially the same except you'll specify the event listeners with addEventListener() like in the MDN web docs example except that you have to instantiate the Dragster instances yourself and you should probably manually call destroy().