How to create Drag and drop components?

Question

I want to create drag and drop components in my web page. For example in right side of the page input text box, radio button, checkbox should be available. Then I need to drag and drop these components to left side of the page.

For this requirement which can be best suit.

I tried searching, suggestions like jQuery, Smart GWT, Ext JS. Which one will be feasible, even other than this too?

Thanks,

Tried using jQuery drag and drop options. But these are played with original instance. But I'm looking for, after drag and drop even then the component should be avail for the next drag? Is it possible ??

Thanks again.

Answer 1

i think http://jqueryui.com/demos/draggable/ would be the most flexible solution in that case.

Answer 2

Why don't you use HTML5 capabilities ?

http://html5demos.com/drag

Answer 3

You should be using "droppable" component in jquery UI

http://jqueryui.com/droppable/

A droppable item is a draggable item by default.

 $( ".selector" ).droppable({
  drop: function( event, ui ) {
    //reset the position of "ui" element to initial position
    //add any new item in the place of dropped item
   }
});