+ Start a Discussion
Ashok0572Ashok0572 

hi, can anyone help me,dat i have a visualforce page and displayed some data and now i want to make those data as drag and drop by using JQUERY,plz how it can be done

Sforce.NinjaSforce.Ninja
Hi Anji,
Adding Jquery on Visualforce is a fairly easy task. Your first step is to go through this document that explains how to use Jquery on Visualforce

https://developer.salesforce.com/page/Developing_Apps_with_jQuery

Next,
You can go throught this blog that explains how to add the widget.

http://www.jitendrazaa.com/blog/webtech/web/create-simple-drag-and-drop-widget-like-igoogle-using-jquery/

 If you still have questions, do paste your initial code and we'll help

Cheers,
Siddhesh
Ravikant kediaRavikant kedia
Use below code:
apex class:
public with sharing class TheController {
    public List<Account> getAccounts()
    {
        return [Select Id, Name, AccountNumber, OwnerId, Phone, Fax From Account];
    }
}
visualforce page:
<apex:page controller="TheController">
    <apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js"/>
    <apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js"/>
    <script>
        $(document).ready(function(){
            $(document.getElementById("{!$Component.theForm.thePageBlock.theTable}")).find("tbody").sortable();
        });
    </script>
    <apex:form id="theForm">
        <apex:pageBlock id="thePageBlock" >
            <apex:pageBlockTable value="{!accounts}" var="account" id="theTable">
                    <apex:column value="{!account.Name}"/>
                    <apex:column value="{!account.AccountNumber}"/>
                    <apex:column value="{!account.OwnerId}"/>
                    <apex:column value="{!account.Phone}"/>
                    <apex:column value="{!account.Fax}"/>
            </apex:pageBlockTable>
        </apex:pageBlock>        
    </apex:form>
</apex:page>

And change it as your assighment
Ashok0572Ashok0572
Hi RaviKant,
thank you for posting other information,its good.

but my requirement is suppose in one column RaviKant is given,if we hold the column and drag it,it would come like Excel sheet,
i.e:
RaviKant
RaviKant
RaviKant
RaviKant
 till where you end dragging