open-index/open-npm huggingface dataset:
npm package: @neondigital/draggable-helper
Description: A js library to simplify your drag and drop functions. Start with a element, it will expose hooks(drag, moving, drop). You can stop drag, moving and drop by conditions. You can set minTranslate. Its code is easy, you can check source code. # features * su
Author: Alec
Latest version: 1.0.20

# draggable-helper
A js library to simplify your drag and drop functions. Start with a element, it will expose hooks(drag, moving, drop). You can stop drag, moving and drop by conditions. You can set minTranslate. Its code is easy, you can check source code.
# features
* support touch simplify(single touch)
* to prevent page scrolling when touch
* expose hooks(drag, moving, drop)
* prevent drag and moving by return false in hook
* set min translate to trigger drag
* set the style of dragging element
* set the class of dragging element
* move the element or move a cloned one
* check if event is triggered by mouse left button
* to prevent text be selected when dragging
# install
```sh
npm install draggable-helper
```
# usage & api
```js
import draggableHelper from 'draggable-helper'
const destroy = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
// opt
// opt will pass to hook, so you can attach custom data into opt, such the data of the element
opt = {
    // [Object] style, set the style of dragging element
    // getStyle(opt), set the style of dragging element
    // [String] draggingClass, default dragging, set the class of dragging element
    // [Boolean] clone, move the element or move a cloned one
    // minTranslate default 10, unit px
    // getEl(dragHandlerEl, opt), optional, get the el that will be moved. default is dragHandlerEl
    // hook, when drag start
    drag(event, opt, store){
      // return false to prevent drag
    },
    // hook, when mouse moving
    moving: (e, opt, store) => {
      // return false to prevent moving
    },
    // hook, when drop
    drop: (e, opt, store) => {
    },
}
// store
store = {
  el
  initialMouse
  initialOffset
  mouse
  move
  movedCount // start from 0
}
```
# demo
[jsfiddle](https://jsfiddle.net/phphe/t694kpua/19/)
npm package: @neondot/dot
Description: A native first, front end library for creating awesome UI. Created to leverage the gap between native apis and reactive frameworks.
Author: Daniele Borra
Latest version: 0.0.3

![DOT Logo](logo.png)

### Starting up as a personal experiment the framework is not in even in an alpha state right now, so please use it just for testing and helping with the development.

---

## DOCS
Full documentation is available here https://neondot.rndv.studio/

## Example of basic usage

To test this file use a bundler and include the result in an html file

```javascript
import { DotApp, DotComponent, register, html } from 'dot';

const app = new DotApp();

class AppTitle extends DotComponent {
  // Declare observed attributes thath will trigger renders on change
  static get observedAttributes() { return ['title']; }
  static get tag() { return 'app-title' }

  constructor() {
    super();

    this.$data.something = null;

    // Watch this data and log it's value on change
    this.$watchers.set('something', (newValue, oldValue) => {
      console.log('Old: ', oldValue);
      console.log('New: ', newValue);
    });

    this.$template = () => html`
      <style>
        h1 { color: darkgray; }
      </style>
      <h1>${this.getAttribute('title')}</h1>
    `;
  }
}

class TextBlock extends DotComponent {
  static get tag() { return 'text-block' }

  constructor() {
    super();

    this.$template = () => html`
      <!-- Mount a child compinent using the template -->
      <app-title title="Hello world!" ref="title"></app-title>
    `;

    requestAnimationFrame(() => {
      // Wait next tick and render its child
      this.$refs.title.render();
    });

    setTimeout(() => {
      // Update the title attribute, and trigger the update
      this.$refs.title.setAttribute('title', '...Hooray!');
      // Also trigger a watcher by changing a watched data
      this.$refs.title.$data.something = 'hello!';
    }, 2000);
  }
}

// Create the app mounting it on a DOM node
app.create(document.querySelector('#app'));

// Register both the components
register(AppTitle);
register(TextBlock);

// Pragmatically create a TextBlock component
const tb = new TextBlock();
// Mount the text block on the app node by not settina a parent
app.mount(tb);

console.log(app.$children);
```