Addy Addy - 1 year ago 64
jQuery Question

What does ui.draggable.draggable means?

I am new to javascript and have stated to learn javascript. I came across a piece of code .I would like to know the use and meaning of

in the code shown below

var drag = ui.draggable;
$(this).droppable('option', 'accept', drag);
drag.draggable('option', 'revert', function(){return false});
var drop_index=$(this).attr("id").split('_')[1];

I would also like to know the sites to learn about drag and drop in javascript,in a better way.

Any help is appreciated in advance.

Answer Source

"ui.draggable" refers to the object containing all the elements that are currently being dragged on the page.

The function

drop: function(e, ui) {

is executed when a draggable object is dropped on a droppable element. You can refer to the jquery-ui API documentation here: for drag and drop functionalities. It is to the point and apt. Also do check their demos. Start with the demos for better grasp of it.

For drag and Drop:

  1. HTML5 already has attributes 'draggable="true"' that you can add to your elements. You can then attach events like handleDrag, handleDrop etc so you get the required functionality. Check it here:
  2. jQueryUI has interactive widgets that can be added to your page elements. It is pretty simple to grasp. Refer to the above link mentioned for exploring. You can use touch-punch library to make jqueryUI work on mobile devices as well.
  3. You can write your own pure javascript drag and drop function. I found one here: .

I know only these 3 ways for drag-and-drop. There might be others as well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download