draggable-mcs
The jQuery plugin that makes a div into a draggable object.
Quick start
draggable-mcs requires jQuery v1.9.1+.
Several quick start options are available:
Download
Clone the Repository
Clone the repo: git clone git@github.com:masonconsultancy/draggable-mcs.git
Npmjs
Install with npm: npm install draggable-mcs
Libman Library Manager
Add this to the libman.json file to include draggable-mcs in your root folder
{
"provider": "jsdelivr",
"library": "draggable-mcs@1.0.14",
"destination": "wwwroot/lib/draggable-mcs/",
"files": [
"dist/css/draggable-mcs.css",
"dist/css/draggable-mcs.css.map",
"dist/css/draggable-mcs.min.css",
"dist/js/draggable-mcs.js",
"dist/js/draggable-mcs.js.map",
"dist/js/draggable-mcs.min.js",
"dist/js/draggable-mcs.min.js.map"
]
}
You can replace the version number with latest, to get the latest version.
Usage
Via JavaScript
// To style only selected with the draggable class
$('.draggable').draggable();
or
// To style all divs. Only divs with the class 'draggable' will be styled
$('div').draggable();
If calling draggable via JavaScript, you will need to wrap your code in a .ready()
block or place it at the bottom of the page (after the last instance of draggable).
$(function () {
$('div.draggable').draggable();
});
Information
It's important that the main div contains a class draggable and whatever you are using for the draggable handle is assigned a class draggable-header
Bootstrap 4.6 Example
<div class="card text-center draggable">
<div class="card-header draggable-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
##Options
Dock top left of the target element
{
.draggable({ position: { dock: '#jQuerytarget' } });
}
Dock top left of the target element and move down 50
{
.draggable({ position: { dock: '#jQuerytarget', top: 50, left: 0 } });
}
Dock relative to viewport (x=150, y=50)
{
.draggable({ position: { top: 50, left: 150 } });
}
Change header target identifier
Please note that this does not set the header with the css styles for the default target identifer '.draggable-header'
You will need to set your own css for this new header target.
{
.draggable({ headerIdentifier: '#headerid' });
}
Bugs and feature requests
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of draggable before submitting an issue.
Documentation
Draggable's documentation, included in this repo is still being completed.
Copyright and license
Copyright (C) 2023 Mason Consultancy Ltd
Licensed under the MIT license.