draggable-mcs
v1.1.1
Published
The jQuery plugin that makes a div into a draggable object
Downloads
2
Readme
Quick start
draggable-mcs requires jQuery v1.9.1+.
Several quick start options are available:
Download
Clone the Repository
Clone the repo: git clone [email protected]: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": "[email protected]",
"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
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
{
.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.