npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gm.drag-drop

v0.1.4

Published

Angular module to add simple, data-driven drag and drop functionality

Downloads

110

Readme

gm.dragDrop

Angular directives to add native, simple, data-driven drag and drop functionality.

Include

gm.dragDrop is available on both NPM and Bower:

$ npm/bower install gm.drag-drop --save

Use

First, add the gm.dragDrop module to your app's dependencies:

var app = angular.module('myApp', ['gm.dragDrop']);

There are 3 directives included in the module: gmDraggable, gmOnDrop, and gmOnHover. Adding the gmDraggable directive to an element makes it draggable. Adding the gmOnDrop directive to an element sets it as a drop zone for the draggable element. Set the value of gmOnHover or gmOnDrop to a function that will be called when the dragged element is over or released on an element, respectively. Set the value of gmDraggable to the object you want to be passed to gmOnDrop.

Items with gmDraggable set can also assign a function to a gmOnInvalidDrop attribute, which will be called if the item is dropped anywhere but a valid drop zone.

Sample controller:

...

this.data = { key: "number", value: "1" }

this.onHover = function(_data, mouseEvent) {
    console.log('hovering', _data.key, _data.value); // hovering number 1
}

this.onDrop = function(_data) {
    console.log('dropped', _data.key, _data.value); // dropped number 1
}

this.invalidDrop = function(_data) {
    console.log('invalid drop', _data.key, _data.value); // invalid drop number 1
}

...

Sample template:

<span gm-draggable="$ctrl.data" gm-on-invalid-drop='$ctrl.invalidDrop'>Number {{data.value}}</span>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-on-hover='$ctrl.onHover'>Drop Area</div>

Style

You can define style for three classes, .gm-drag-element, .gm-dragging and .gm-dropping, to set the style of the original element that was clicked, the element being dragged, and the drop zone element when the mouse hovers over it while dragging, respectively.

Drop Zones

You can also define a gm-drop-zone attribute on both draggable elements and drop zones to control where elements can be dropped. Functions assigned to an element's gm-on-drop or gm-on-hover attributes will only be called when its gm-drop-zone attribute matches the dragged element's gm-drop-zone attribute.

Sample template using drop zones:

<span gm-draggable="$ctrl.data" gm-drop-zone='1'>Number {{data.value}}</span>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-drop-zone='2'>Cannot Drop Here</div>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-drop-zone='1'>Drops Allowed Here</div>

Handles

You can add a child element to a gm-draggable element with the tag name or class gm-drag-handle to have it act as the drag 'handle' if you don't want the entire element to respond to dragging.

Sample template using a drag handle:

<span gm-draggable="$ctrl.data">
	<span class="gm-drag-handle">[Dragging only works if you click here]</span> Number {{data.value}}
</span>

Demo

http://plnkr.co/edit/Gz4FuH?p=preview