Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
karishma kumarikarishma kumari 

Visualforce Drag-and-Drop Functionality

i have built a vf 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>

controller:-

public with sharing class TheController {

    public List<Account> getAccounts()

    {

        return [Select Id, Name, AccountNumber, OwnerId, Phone, Fax From Account limit 10];

    }

}
hi, this code working good.
but it is working in one section (means i can set the record in any place among all records), if i want to drag a single record from all records and want to drop it in a other page block section(like in list1 i want to display all records , then if i drag a single record and drop it in another pageblock section named list2) .
how this will be possible?

please give me solution..
Sunil MadanaSunil Madana
Hi, Not sure if you found a fix for your problem. Thought of sharing the below code if it helps.

Code-1: Moving between same sections from one table to another. 
<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.theTable1}")).find("tbody").addClass('connectedSortable');
            $(document.getElementById("{!$Component.theForm.thePageBlock.theTable2}")).find("tbody").addClass('connectedSortable');
            $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody")
                .sortable({
                    connectWith: ".connectedSortable",
                    items: "> tr:not(:first)",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 999990
                });
            $(document.getElementById("{!$Component.theForm.thePageBlock.theTable2}")).find("tbody")
                .sortable({
                    connectWith: ".connectedSortable",
                    items: "> tr:not(:first)",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 999990
                });            
        });
    </script>
    <apex:form id="theForm">
        <apex:pageBlock id="thePageBlock" >
            <apex:pageBlockTable value="{!accounts}" var="account" id="theTable1" styleClass="mytable">
                    <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><br/><br/>
            <apex:pageBlockTable value="{!accounts}" var="account" id="theTable2" styleClass="mytable">
                    <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>

Code-2: Moving between different sections from one pageBlocktable to another. 
<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.theSection1.theSectionItem.theTable1}")).find("tbody").addClass('connectedSortable');
            $(document.getElementById("{!$Component.theForm.thePageBlock.theSection2.theSectionItem.theTable2}")).find("tbody").addClass('connectedSortable');
            $(document.getElementById("{!$Component.theForm.thePageBlock.theSection1.theSectionItem.theTable1}")).find("tbody")
                .sortable({
                    connectWith: ".connectedSortable",
                    items: "> tr:not(:first)",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 999990
                });
            $(document.getElementById("{!$Component.theForm.thePageBlock.theSection2.theSectionItem.theTable2}")).find("tbody")
                .sortable({
                    connectWith: ".connectedSortable",
                    items: "> tr:not(:first)",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 999990
                });            
        });
    </script>
    <apex:form id="theForm">
        <apex:pageBlock id="thePageBlock" >
            <apex:pageBlockSection columns="2" collapsible="true" title="PageBlockSection1" id="theSection1">
                <apex:pageBlockSectionItem id="theSectionItem">
                    <apex:pageBlockTable value="{!accounts}" var="account" id="theTable1" styleClass="mytable">
                        <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:pageBlockSectionItem>
            </apex:pageBlockSection>
            <apex:pageBlockSection columns="2" collapsible="true" title="PageBlockSection2" id="theSection2">
                <apex:pageBlockSectionItem id="theSectionItem">
                    <apex:pageBlockTable value="{!accounts}" var="account" id="theTable2" styleClass="mytable">
                        <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:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

If the above suggestion worked, let us know by marking the answer as "Best Answer" right under the comment which will help the rest of the community should they have a similar issue in the future. Thanks, Sunil
Agustin CatalanoAgustin Catalano
How can we save the changes with a buttom?
Bhavdip Gadhiya 7Bhavdip Gadhiya 7
SFDC - Issue Helper Is it possible to drag and drop from/to account record to/from contact record in table like urs above code? 
V TV T
Try This sample code
https://salesforcetrail.blogspot.com/2020/04/drag-and-drop-show-and-hide-columns.html