Drag & Drop Sorting in Apex Part 2

Let’s jump in and get started on the second part of a larger post on Drag & Drop Sorting in Apex. The last post left off with creating the bones of the application and now it is time to wire it up with jQuery Sortable.

The jQuery selector $( “#todo_report” ) that is being used to initialize Sortable is coming from the Comments template that was copied in Part 1 of this post.

<ul class="t-Comments #COMPONENT_CSS_CLASSES#" #REPORT_ATTRIBUTES# id="#REGION_STATIC_ID#_report">

Drop the code below in the Execute when Page Loads section.

$( "#todo_report" ).sortable({    
cursor: "move", 
connectWith: ".t-Comments",// this connects lists with one another
dropOnEmpty: true,
opacity: .5,
helper: "clone",
revert: true,// animation when sorted element finds it's place
items:">li",// defines what items in the list should be sortable     
scroll: true,  
scrollSensitivity: 10,
scrollSpeed: 40,
placeholder: "toDoList",//class name applied when sorting
forcePlaceholderSize: true,//set to true to make option above work
opacity: 0.9,
/*Sortable offers many predefined events. The event below 
  is fired when user stops sorting or moving items in the lists*/
stop: function( event, ui ) {   
 var toDoArray = $( "#todo_report" ).sortable( "toArray",         {attribute: "data-id"} );
 var toDoId    = ui.item.attr("data-id"); 
 console.log(toDoArray); 
 console.log(toDoId);
                              }
                         });

Run the page and do some sorting! Fun but doesn’t really do much. We can add JavaScript functions that can handle client side operations, and then a call to the apex.server.process to do some server side work.

We will need to create page items that will hold the lists array and data-id. I created the page items per each region to keep what is happening where clear, but one set of page items would be fine.

Create a function that can be used in your Apex page to interact with the events of Sortable.

function  ToDoInteraction(toDoId,toDoArray){ 
 /*set value of page items first and then set them into session state*/ 
 $('#TODO_ID').val(toDoId);
 $('#TODO_ARRAY').val(toDoArray);  
 var pData = {    p_arg_names:  ['TODO_ID','TODO_ARRAY'],
                          p_arg_values: [toDoId,toDoArray]
                };
 var pOptions = {    dataType:  "text",
                     async:     true,
                     success:   pSuccess,
                     error:     pError,
                     complete:  pComplete
                 };
 apex.server.process ( null, pData, pOptions);
 
 function pSuccess(){}
 function pError(){}
 function pComplete(){}   
}
 

Next we will need to add our newly created function to our Sortable stop event.

stop: function( event, ui ) {   
 var toDoArray = $( "#todo_report" ).sortable( "toArray",         {attribute: "data-id"} );
 var toDoId    = ui.item.attr("data-id"); 
 console.log(toDoArray); 
 console.log(toDoId);
 /*Add this line to your Sortable initialization in the Execute when Page Loads section. This will pass the data-id and array to our function.*/
 toDoInteraction(toDoId,toDoArray);
                              }
 

Now our app has some functionality that can be used to do whatever processing you need. The page items values are being set after the stop event has been fired, and they are also being set in session state because of our call to apex.server.process .