+ Start a Discussion

Drag And drop functionality on visualforce Page


  I am having question bank. there are list of questions and their answers. I have write this in apex repeat. I want to add drag and drop functionality on this questions. Means i can able to change sequence of the question. Is it possible and how?

Thanks & Regards,
JyothsnaJyothsna (Salesforce Developers) 

Please check the below sample code. It will give some basic idea.

VisualForce Page:
<apex:page standardController="Contact" extensions="extContactList">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

    <ul id="sortable" >
        <li class="ui-state-default"> First Name - Last Name - Id</li>
    <apex:repeat value="{!ContactList}" var="c">
        <li class="ui-state-default"> {!c.Name}  - {!c.Id} </li>

public with sharing class extContactList {

    public extContactList(ApexPages.StandardController controller) {

   public List<Lead> getContactList(){
    List<Lead>  c = [select id, Name  from  Lead Limit 10];
   return c;

Best Regards,