function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
satakshisatakshi 

Drag And drop functionality on visualforce Page

Hello,

  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,
Satakshi
JyothsnaJyothsna (Salesforce Developers) 
Hi,

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"/>
   
     <style>
#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; }
</style>

<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

    <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>
   
    </apex:repeat>
    </ul>
   
</apex:page>


Controller:
  
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,
Jyothsna