Thoughts on development, design and the world we live in.

Radiant CMS: Improving Drag & Order

By admin in Uncategorized. Posted on December 2nd

In the Radiant administration interface, we wanted to allow our CMS users to be able to move pages around and have that final order in the navigation. Well, that is solved by an existing extension- the Drag and Order by Bright4.

We decided to change the icon to make it jump out more, and to turn off rollover highlighting when the user is dragging the page. This post is about changing the highlight rollover functionality.

The rollover highlight is set with CSS, in Radiant’s main.css Line 257:

So we needed to essentially turn the tr.highlight/tr.hover off when an object is being dragged, then turn it back on again after dragging, so the rest of the application still has this rollover functionality.

At first, we wrote our own JavaScript file and included it in the header partial, and on the events of MouseUp and MouseDown for the drag image.

A week later, I reviewed the Drag Order JavaScript, and was able to consolidate our changes within that script. When assessing all of the TRs for the table, I inserted a quick loop through all TRs and setting the background color to white:

This is on line 77- in the DragOrder function.

It’s great to consolidate a lot of changes in 4 lines!

By admin | Posted in Uncategorized | Tagged | Comments (0)

Post a Comment

Your email is never shared. Required fields are marked *