A simple draggable wrapper component for Om
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
resources/public
src
.gitignore
LICENSE
README.md
project.clj

README.md

simple-om-draggable

Clojars Project

A simple draggable wrapper component for Om

Overview

I built this thing to fix a few issues I experienced with Anna Pawlicka's and neo / felixflores' draggable components. It's obviously also based on both :)

Usage:

  • Add the clojars repository to your project.clj dependencies.

  • Require the draggable-item wrapper fn in your namespace:

    (:require [simple-om-draggable.core :refer [draggable-item]])

  • It has two arities, [view pos-keys] [view pos-keys pos-key-map].

    • view is your component
    • pos-keys is a vector that describes the path to the position state in the component's cursor
    • pos-key-map is a map that describes what keys in the position state cursor to use as top and left offset (optional, defaults to {:left :x, :top :y} - so the left offset is saved in :x, the top offset is saved in :y)

This component works with multiple draggables overlapping each other, because it listens to mousemove and mouseup events globally. It also protects the user from accidentally clicking a link that they hovered over when they started dragging (via an invisible overlay - it's not beautiful, but it works).

Example

Run lein cljsbuild once, then open up resources/public/index.html.

License

Copyright © 2015 Simon Welker

Distributed under the MIT License.