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:

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:
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

The result of the above code is: