Question

I’d like to work on drag and drop web programming. I want the data to be moved from one panel to another panel by the drag and drop feature as we experience in Google Plus. I might have panels/frames in a page like To-be-done section, Done section etc. When I’m done with a particular item, I’d drag the item from the To-be-done section to the Done section. I’ve a raw idea at present. Please share your thoughts on which resources (IDE/Programming/Technology) to be useful to begin my project.

Answer 1

You are looking for jQuery UI. It has a draggable,dropable and sortable feature

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Using it is very simple,

1) Include the reference to the jQuery and jQuery ui library in your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

2) Attach the draggable function to the element

  <script>
    $(function() {
        $( "#myDivId" ).draggable();  //
    });
  </script>

EDIT : About the size of jQuery UI. It is not 150K. the minified version of jQuery UI is 50KB size. If you are not using jQuery already( really ?) then you need to download that too, Thats another 32.KB. I would like to refer those from a public CDN like google’s to ensure the availabilty and caching.