Sign Up ›

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

Need help for drag and drop the apps as per the screen shot attached

Dear Members,
 We have immediate requirement to move the apps by drag and drop in VF page. Planning to implement by using JQuery. If anybody would have implemented similar functionality or any suggestion kindly email me @ snowshadali@gmail.com.

Page 1                                                                                    |                     Page 2
------------------------------------------------------------------------------------------------------------------------------------------
App1                App2              App3              App4

App5                App6              App7              App8

User by using mouse he will move the App8 to App6 position and all the app should be auto adjust.  Same for Page 2 ..Any suggestion or similar functionality if you would have implemented kindly let me know soon..

Thanks in advance..
Nowshad
Best Answer chosen by Nowshad
Amit Chaudhary 8Amit Chaudhary 8
Hi Nowshad,

Please try below code :- 
<apex:page >
    <link rel="stylesheet" href="/resources/demos/style.css"/>
    <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>
       
     <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();
});

window.getValues = function() {
    $.each($('#sortable').find('li'), function() {
        alert($(this).text());
    });
}
</script>


<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>

 <center><button type="button" onclick="getValues()">Get Lines</button></center>
    
</apex:page>

Thanks
Amit Chaudhary

All Answers

Eswar Prasad@Sfdc11Eswar Prasad@Sfdc11
HI Nowshad,
pls see below code Is it possible to move pageblocktable rows up and down? i think we are asking same requirement like this

visualforce

<apex:page standardController="Contact" extensions="extContactList" showHeader="false">
    <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.FirstName} - {!c.LastName} - {!c.Id} </li>
   
    </apex:repeat>
    </ul>
   
</apex:page>

controller

public class extContactList {
   

    public extContactList(ApexPages.StandardController controller) {

    }
   
    public List <Contact> getContactList(){
    List <Contact> c = [select id, FirstName, LastName from Contact Limit 10];
   
    return c;
   
    }

}

If you get the answer, please mark it as the correct answer. It will be a help to others who are facing the same problem later.

Regards
Eswar Prasad.
Amit Chaudhary 8Amit Chaudhary 8
Hi Nowshad,

You can try below code:-

Example 1:-  
<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/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>
    </head>
    <body>

    <ul id="sortable">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>


    </body>
    </html>
http://stackoverflow.com/questions/27612043/jquery-ui-boilerplate-sortable-code-not-behaving-properly

Example 2:-  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
<br>
    
    <center><button type="button" onclick="getValues()">Get Lines</button></center>

http://stackoverflow.com/questions/30604799/how-to-get-the-list-values-in-jquery-sortable

Example 3 :- 
<div class="row">
    <div class="col-md-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">Photos</h1>
            </div>
            <div class="panel-body">

                <div class="row sortable">

                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">1
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">2
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">3
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">4
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">5
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">6
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">7
                        </a>
                    </div>
                    <div class="col-md-3 thumb">
                        <a class="thumbnail" href="#">
                            <img class="img-responsive" src="http://placehold.it/400x300" alt="">8
                        </a>
                    </div>
                 </div>

            </div>

        </div>
    </div>
</div>

http://www.bootply.com/DzAKXhHztZ

Please let us know if this will help you. 

Thanks,
Amit Chaudhary
Amit Chaudhary 8Amit Chaudhary 8
Hi Nowshad,

Please try below code :- 
<apex:page >
    <link rel="stylesheet" href="/resources/demos/style.css"/>
    <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>
       
     <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();
});

window.getValues = function() {
    $.each($('#sortable').find('li'), function() {
        alert($(this).text());
    });
}
</script>


<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>

 <center><button type="button" onclick="getValues()">Get Lines</button></center>
    
</apex:page>

Thanks
Amit Chaudhary
This was selected as the best answer