Magic Icon Free Range Any Where Drag: Drag N Drop (): Magic JavaScript

Quick Jump ↵

Usage

Add <link href="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>

Add <script type="text/javascript">$m.trick.drag_n_drop.free = true;</script> inside your <body> tag.

Use the examples below to build your own!

Examples

1. Grab any where on the box below and drag it any where

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Grab the title on the box below and drag it any where.

Title Grab

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Drag the image

Magic Icon

4. Drag the image and then fire a JavaScript callback

Magic Icon

The data-mjf_drag_n_drop_callback attribute should be set to an existing JavaScript function's name.

It will be passed the element's ID as a string.

Notes

Once and elment is moved, it will no longer be part of the page's visual flow.

« Back to Drag N Drop

« Back to the main documentation