https://github.com/kodedninja/nanodraggable

Draggable nanocomponent
https://github.com/kodedninja/nanodraggable

choo

Last synced: 2 months ago
JSON representation

Draggable nanocomponent

• Host: GitHub
• URL: https://github.com/kodedninja/nanodraggable
• Owner: kodedninja
• License: mit
• Created: 2018-03-22T15:16:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-01T21:16:57.000Z (over 6 years ago)
• Last Synced: 2025-07-11T08:07:44.400Z (3 months ago)
• Topics: choo
• Language: JavaScript
• Size: 59.6 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# nanodraggable

Draggable nanocomponent

## installation

```

npm i -S nanodraggable

```

## example

```javascript

var Nanodraggable = require('nanodraggable')

var html = require('choo/html')

class DraggableObject extends Nanodraggable {

  constructor(x, y) {

    super(x, y)

  }

  content(text) {

    return html`
${text}
`

  }

}


var draggable = new DraggableObject(0, 0)

function view (state, emit) {

  return html`

    


      ${draggable.render('Drag me')}

    

  `

}

```


## api

#### ```draggable = Draggable(x, y)```

Creates a new component. Takes ```x``` and ```y``` as default position.

#### `draggable.content(...args)`

An abstract function to override that returns the content of the draggable component. The arguments from the `render` function are forwarded to this.

#### ```draggable.onmousedown(event)```

An optional abstract function to override. Called on `mousedown`.

#### ```draggable.onmouseup(event)```

An optional abstract function to override. Called on `mouseup`.