Sets or gets where will be appended the draggable's feedback.

Code examples

Set the appendTo property.

$('#jqxDragDrop').jqxDragDrop({ appendTo: 'body' });

Get the appendTo property.

var appendTo = $('#jqxDragDrop').jqxDragDrop('appendTo');

Sets or gets whether the dragging is disabled.

Code examples

Set the disabled property.

$('#jqxDragDrop').jqxDragDrop({disabled:true});

Get the disabled property.

var disabled = $('#jqxDragDrop').jqxDragDrop('disabled');

Sets or gets the distance required for the cursor to pass befor the drag begins.

Code examples

Set the distance property.

$('#jqxDragDrop').jqxDragDrop({distance:10});

Get the distance property.

var distance = $('#jqxDragDrop').jqxDragDrop('distance');

This property can be used for setting some kind of information transferred with the draggable.

Code examples

Set the data property.

$('#jqxDragDrop').jqxDragDrop({data: {foo: 'foo', bar: 'bar'}});

Get the data property.

var data = $('#jqxDragDrop').jqxDragDrop('data');

Sets or gets whether the draggable element will change its position ('default') or not ('none') when the element is dropped.

Code examples

Set the dropAction property.

$('#jqxDragDrop').jqxDragDrop({ dropAction: 'none' });

Get the dropAction property.

var dropAction = $('#jqxDragDrop').jqxDragDrop('dropAction');

Sets or gets the drop target. The drop target is a DOM element(s) for which jqxDragDrop triggers events when the user drags or drops the draggable element over that element(s). The drop target can be specified by using a selector or an object. If the user drags the draggable element over the drop target, the onDropTargetEnter event will be raised. If the draggable element is inside the drop target and the user drags the element outside the drop target, the onDropTargetLeave event is raised. When the user drops the draggable element over a drop target, the onTargetDrop event is raised.

Code examples

Set the dropTarget property.

$('#jqxDragDrop').jqxDragDrop( { dropTarget: $(document.body) } );

Specifying the drop target with CSS selector:

$('#jqxDragDrop').jqxDragDrop( { dropTarget: $('.dropTarget') } );

The above code will make all elements which use the "dropTarget" CSS class to be drop targets for the draggable element.

Get the dropTarget property.

var dropTarget = $('#jqxDragDrop').jqxDragDrop('dropTarget');

Sets or gets element's z-index when it's dragging.

Code examples

Set the dragZIndex property.

$('#jqxDragDrop').jqxDragDrop({ dragZIndex: 6 });

Get the dragZIndex property.

var dragZIndex = $('#jqxDragDrop').jqxDragDrop('dragZIndex');

Sets or gets the feedback. The feedback is the object which is actually dragged by the user.

Possible Values:

'clone'-the user drags a clone of the original element

'original'-the user drags the original element

Code examples

Set the feedback property.

$('#jqxDragDrop').jqxDragDrop({feedback:'original'});

Get the feedback property.

var feedback = $('#jqxDragDrop').jqxDragDrop('feedback');

Callback which is executing when the feedback is created.

Code examples

Set the initFeedback property.

$('#jqxDragDrop').jqxDragDrop({ initFeedback: function(feedback) { feedback.width(300); } });

Get the initFeedback property.

var onDropTargetLeave = $('#jqxDragDrop').jqxDragDrop('initFeedback');

Sets or gets draggable object's opacity when it's dragging.

Code examples

Set the opacity property.

$('#jqxDragDrop').jqxDragDrop({opacity:0.3});

Get the opacity property.

var opacity = $('#jqxDragDrop').jqxDragDrop('opacity');

Callback which is executing when the drag ends.

Code examples

Set the onDragEnd property.

$('#jqxDragDrop').jqxDragDrop({ onDragEnd: function() { alert('Bar'); } });

Get the onDragEnd property.

var appendTo = $('#jqxDragDrop').jqxDragDrop('onDragEnd');

Callback which is executing while dragging.

Code examples

Set the onDrag property.

$('#jqxDragDrop').jqxDragDrop({ onDrag: function(data, pos) { alert(pos.x); } });

Get the onDrag property.

var onDrag = $('#jqxDragDrop').jqxDragDrop('onDrag');

Callback which is executing when drag start.

Code examples

Set the onDragStart property.

$('#jqxDragDrop').jqxDragDrop({ onDragStart: function(pos) { alert(pos.x); } });

Get the onDragStart property.

var onDragStart = $('#jqxDragDrop').jqxDragDrop('onDragStart');

Callback which is executing when drag ends over the drop target.

Code examples

Set the onTargetDrop property.

$('#jqxDragDrop').jqxDragDrop({ onTargetDrop: function(data) { alert('Bar'); } });

Get the onTargetDrop property.

var onTargetDrop = $('#jqxDragDrop').jqxDragDrop('onTargetDrop');

Callback which is executing when the draggable enter any of it's drop targets.

Code examples

Set the onDropTargetEnter property.

$('#jqxDragDrop').jqxDragDrop({ onDropTargetEnter: function() { alert('Bar'); } });

Get the onDropTargetEnter property.

var onDropTargetEnter = $('#jqxDragDrop').jqxDragDrop('onDropTargetEnter');

Callback which is executing when the draggable leave any of it's drop targets.

Code examples

Set the onDropTargetLeave property.

$('#jqxDragDrop').jqxDragDrop({ onDropTargetLeave: function(data) { alert(data); } });

Get the onDropTargetLeave property.

var onDropTargetLeave = $('#jqxDragDrop').jqxDragDrop('onDropTargetLeave');

Sets or gets dragdrop's restrict area.

Possible Values:

'body'

'document'

'parent'

{left,top,width,height}

Code examples

Set the restricter property.

$('#jqxDragDrop').jqxDragDrop({restricter:'body'});

Get the restricter property.

var restricter = $('#jqxDragDrop').jqxDragDrop('restricter');

Sets or gets whether the draggable element will be reverted to it's original position after drop.

Code examples

Set the revert property.

$('#jqxDragDrop').jqxDragDrop({revert:true});

Get the revert property.

var revert = $('#jqxDragDrop').jqxDragDrop('revert');

Sets or gets the duration for which the draggable object will be reverted.

Code examples

Set the revertDuration property.

$('#jqxDragDrop').jqxDragDrop({revertDuration:300});

Get the revertDuration property.

var revertDuration = $('#jqxDragDrop').jqxDragDrop('revertDuration');

Sets or gets whether the draggable item is over it's drop target when it's intersecting it or when it's fully inside it's target.

The onDropTargetEnter event will be triggered depending on the value of this property. The 'fit' tolerance means that the draggable item is fully inside the target, where the 'intersect' means that the item is intersecting with the target.

Code examples

Set the tolerance property.

$('#jqxDragDrop').jqxDragDrop({tolerance:'fit'});

Get the tolerance property.

var tolerance = $('#jqxDragDrop').jqxDragDrop('tolerance');

This event is triggered when the item is dragged for first time.

Code examples

Bind to the dragStart event by type: jqxDragDrop.

$('#jqxDragDrop').bind('dragStart', function () { // Some code here. }); 

This event is triggered when the item is dropped.

Code examples

Bind to the dragEnd event by type: jqxDragDrop.

$('#jqxDragDrop').bind('dragEnd', function () { // Some code here. }); 

This event is triggered while the item is dragging.

Code examples

Bind to the dragging event by type: jqxDragDrop.

$('#jqxDragDrop').bind('dragging', function () { // Some code here. }); 

This event is triggered when the draggable item is over it's drop target for first time.

Code examples

Bind to the dropTargetEnter event by type: jqxDragDrop.

$('#jqxDragDrop').bind('dropTargetEnter', function () { // Some code here. }); 

This event is triggered when the draggable item leave it's drop target.

Code examples

Bind to the dropTargetLeave event by type: jqxDragDrop.

$('#jqxDragDrop').bind('dropTargetLeave', function () { // Some code here. });