Addy Addy - 20 days ago 7
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

ui.draggable.dragabble
in the code shown below

drop:function(e,ui){
var drag = ui.draggable;
$(this).droppable('option', 'accept', drag);
drag.css({'top':$(this).css('top'),'left':$(this).css('left')});
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

"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: http://api.jqueryui.com/category/interactions/ 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: https://www.html5rocks.com/en/tutorials/dnd/basics/
  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 http://touchpunch.furf.com/ 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: https://github.com/lukasolson/drag-n-drop-js .

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

Comments