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

Download the latest release.

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.

• Bug reports
• Feature requests

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.