Part III: Moving Up to AJAX in Java

Generation QR Code ISO/IEC18004 in Java Part III: Moving Up to AJAX

When the user drags a dragMe element and drops it on the target, the target s background color changes and the program reports the text of the element that was dragged The code is easy to follow: function changeTarget(event, ui){ $( #target )addClass( ui-state-highlight ) html( Dropped ) append(uidraggabletext()); } // end changeTarget To respond to a drop event, follow these steps: 1 Create a function to correspond to the drop event The drop event is bound to the function changeTarget, so you need to create such a function 2 Include two parameters Bound event functions require two parameters The first is an object that encapsulates the event (much like the one in regular DOM programming) and a second element, named ui, which encapsulates information about the user interface You use the ui object to determine which draggable element was dropped on the target 3 Highlight the target You should signal that the target s state has changed You can change the CSS directly (using jQuery) or use jQuery theming to apply a predefined highlight class I chose to use the jQuery theme technique to simply add the ui-state-highlight class to the target object 4 Change the text to indicate the new status You normally want to do something to indicate what was dropped If it s a shopping application, for example, add the element to an array so that you can remember what the user wants to purchase In this example, I simply changed the text of the target to indicate that the element has been dropped 5 Use uidraggable to gain access to the element that was dropped The ui object contains information about the user interface The uidraggable attribute is a link to the draggable element that triggered the current function It s a jQuery element, so you can use whatever jQuery methods you want on it In this case, I extract the text from the draggable element and append it to the end of the target s text

Another function is used to handle the dropout condition, which occurs when draggable elements are no longer sitting on the target I bound the resetTarget function to this event: function resetTarget(event, ui){ $( #target )removeClass( ui-state-highlight ) html( Drop on me ); } // end reset 1 Remove the highlight class from the target The theme classes are easily removed Remove the highlight class and the target reverts to its original appearance 2 Reset the HTML text Now that the target is empty, reset its HTML so that it prompts the user to drop a new element

You can simply run the program as-is (with a single copy of the dragMe class), but drag-and-drop is more often used with a number of elements For example, you might allow users to drag various icons from your catalog to a shopping cart The basic jQuery library provides all the functionality necessary to make as many copies of an element as you want Copying an element is a simple matter of using the jQuery clone() method The more elaborate code is used to ensure that the various elements display properly: function cloneDragMe(){ for (i = 1; i <=4; i++){ zValue = (101 + i) + ; yPos = 100 + (i * 20) + px ; $( div:first )clone() insertAfter( div:first ) css( top , yPos) css( zIndex , zValue) append( # + i); } // end for loop } // end cloneDragMe

To build multiple copies of the draggable element, follow these steps: 1 Create a for loop Any time you re doing something repetitive, a for loop is a likely tool for the job To make four clones numbered 1 through 4, as shown in the example, you name a variable I, which varies from 1 to 4 2 Create a zValue variable for the element The CSS zIndex property is used to indicate the overlapping of elements Higher values appear to be closer to the user In the example, I gave each element a zOrder of over 100, to ensure that each element appears over the target (If you don t specify zIndex, dragged elements might be placed under the target and become invisible The zValue variable is mapped to zIndex) 3 Determine the Y position of the element I want each successive copy of the dragMe element to be a bit lower than the previous one Multiplying i by 20 ensures that each element is separated from the previous one by 20 pixels Add 100 pixels to move the new stack of elements near the original 4 Make a clone of the first element Use the clone() method to make a clone of the first div (Use the :first filter to specify which div you want to copy) 5 Remember to insert the newly cloned element The cloned element exists only in memory until it s added somehow to the page I chose to add the element right after the first element 6 Set the top of the element with the yPos variable Use the yPos variable you calculated earlier in this function to set the vertical position of the newly minted element Use the css() method to apply the yPos variable to the element s left CSS rule 7 Set zIndex As with the y position, the zValue variable you created is mapped to a CSS value In this case, zValue is mapped to the zIndex property 8 Add the index to the element s text Use the append() method to add the value of i to the element s HTML This way, you can tell which element is which