Documentation

Getting Started

jqxDragDrop

jqxDragDrop is a plugin which will make any DOM element draggable. It can be used in combination with many widgets like jqxTree, jqxGrid, jqxListBox and etc.
Every UI widget or plugin from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxDragDrop plugin requires the following files: 

<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to select DOM element/elements which you want to drag. The last step is to initialize jqxDragDrop by adding the following script: 
$("#element").jqxDragDrop();

To set a property (option), you need to pass the property name and value(s) in the jqxDragDrop's constructor. 
$("#element").jqxDragDrop({ disabled: true });
To get a property(option), you need to pass the property name to the jqxDragDrop's constructor. 
var disabled = $("#element").jqxDragDrop('disabled');
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get when the user start dragging the element. The example code below demonstrates how to bind to the ‘dragStart’ event of jqxDragDrop. 
$('#element').on('dragStart', function (event) {
    alert('Drag Started');
});

Basic Draggable Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery DragDrop Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize jqxDraggable
            $("#element").jqxDragDrop();
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div style="width: 50px; height: 50px; border: 1px solid #A67E3A; background-color: #FFC663;" id="element">        
        <div style="margin-left: 3px; margin-top: 20px; font-size: 10px; font-family: Verdana;">Drag me</div>
    </div>
</body>
</html>

The result of the above code is: