LDN - Luminis Developer Network

This post is my third, and probably last(at least for a while) on drag and drop channels in Luminis. If you haven't read the first two, "D&D Channels" and "AD&D Channels", make sure you read them first, as this post builds off of them.

Making the AJAX Connection

We're going to replace the location.href line at the bottom of the DragChannel.js file with some AJAX code to make the call back to Luminis with the URL we've constructed. Replace that line with the following:

ajaxpage(MoveURL, null, false);

Here's the (pretty standard) ajaxpage function we downloaded from Dynamic Drive (this has been modified slightly to make it a little more flexible):

[One note-you'll see one code segment above that uses the word "onreadystatechange equals" instead of the '=' sign. This is because for some reason Drupal here at LumDev was choking on it and kept reporting "terminated due to suspicious input data" - please make the appropriate change]

Now, calls to build the dropped channel are done in the background so you no longer have to refresh the page. This is *much* better.

Dragging to the Bottom

One thing you'll notice in all of this is that if you take a channel and try dragging it to the bottom of a column, you can't drop it. Right now, (through Sortables) all of our channels are Draggables, but they are also Droppables-valid areas for channels to be dropped on. This isn't the case for areas outside of the channels.

This condition is made somewhat more complicated by the way that Luminis handles channel reorganization. If you look at the URLs we constructed in the last article to integrate with Luminis' channel layout code, the URLs work by specifying that a channel has moved *before* (not after) another one, making it a little more difficult to position channels at the end of columns.

Being unable to target blank space as a valid droppable area also leads to another negative side-effect. If you empty out all of the channels in a column, you can no longer drop any channels there since the column no longer has any droppables. Clearly this deficiency needs to be addressed.

So, how would we drag a channel to the bottom of a column? The first thing we would have to do is create dummy channel divs at the bottom of each column (these channels wouldn't be real Luminis channels in any sense-just an area that we can make a valid droppable). We can do that by making changes to the Sortable template created in my last post.

You can insert this just above the location where Columns are added to the ColumnArray. At the bottom of each column, this creates a ColumnFooter div. This div has a class of 'DragChannel' which means that when the Sortables are created in DragChannel.js, it will be made a draggable and a droppable, like other channels. Unlike normal Luminis channels, we don't really want people to be able to move this div around (its job is to stay at the bottom of each column) so we simply don't create a drag handle for it.

Now, lets move onto the necessary changes inside DragChannel.js.

What we'd really like to do is for these ColumnFooter DIVs to extend to the bottom of the webpage in each column. In all likelihood, you'll have several columns of differing heights(due to the number and height of channels in it). In order for this scheme to work, whatever the height of your column is, its column footer has to have a height that extends from the bottom of your last channel to the bottom of the page-so no matter where along the bottom a channel is dragged, it will overlap our hidden false droppable(the ColumnFooter div). We can accomplish this with a little JS code. See the equalizeColumn function below:

This just loops through the column footers, finds their position (to determine the longest column) and adjust their heights so all columns are "equal". We need to call this function in two places. First, it needs to be called outside of any function so that the columns are initialized at the same height (this is necessary for an initial drag). Second, it needs to be called at the end of the onDrop function. After each successful drop, the heights of all of the columns have changed, so the column footer divs need to be adjusted accordingly.

Now that we have dynamically adjusting invisible droppable areas at the bottom of each column-how do we handle this? If we leave the rest of the code in place as is-the code that we have to create the Luminis URL dynamically would pull the id of the droppable area - in this case ColumnFooter. But this isn't a valid channel, and Luminis won't know what to make of it.

What we really need to do is if we detect that the droppable area is a footer, insert our channel as the last channel in the column. Luminis helps us out a little bit here-if you look at the URL string that Luminis uses to organize channels, it contains an action called 'insertBefore'. There is also another action called 'appendAfter' that essentially adds a channel to the end of the column. In this case we can use the original droppable (the column) in the onDrop function to pass as a parameter. Code for the revised onDrop function is below.

[One note-you'll see one code segment above that uses the word "onDrop equals" instead of the '=' sign. This is because for some reason Drupal here at LumDev was choking on it and kept reporting "terminated due to suspicious input data" - please make the appropriate change]

This not only allows you to drag to the bottom of a column, but also allows you to drag channels into a column that has been emptied. (Of course, if you wanted an emptied out column to vanish, you could probably try setting the column's display style to none-this is something I haven't done at the time of this writing).

That about wraps it up. Special thanks for this whole thing truly go to Zach Tirrell and Jon Wheat, who demonstrated what was really possible.

If anyone has any questions, let me know!