Recently i came across with one requirement where end user needs a multiselect picklist where he can drag drop items between two list in Salesforce. I searched for some good drag drop scripts over net and finally found best one which fits in my need. It is from thechriswalker.net and you can see that in action here.
So I used that jquery stuff and wrapped that in a re-usable VF component to make it more general. It is very simple to use and easy to embed in you VF page.
In your VF page you simply need to call the VF component as below syntax:
<c:sfdragdroplist list1="India;United States;France;Germany;Japan" outputfieldid="list_2_serialised">
The above syntax will make two list on screen drag and drop enabled. Source list will have counties given in "list1". This attribute contains the list of items separated by semicolon ";". You can directly hard code these items to component or you can also fetch from any object fields and make that semicolon separated (note: multiselect picklist already contains values as semicolon separated) and pass to component. For storing what user is selecting for your DB or later processing purpose you need to make one extra textfield (or hidden field) and provide that id in above component like "list_2_serialised"
<input id="list_2_serialised" name="list_2_serialised" value="{!list2FinalItems}" type="hidden">
You can download the complete code from this package url
https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t90000000PpxL
You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/apex/DemoSFDragDropList
The above implementation is for simple list drag drop, one can extend it to make it more advance level to enable drag drop between two different tables or screens.
Hope this will be helpful for users!!!
Thanks
Aslam Bari
