MySource Matrix with Drag-and-Drop

We at Squiz have recently been faced with a task of designing a drag-and-drop interface. This got me thinking of different potential possibilities and now that MySource Matrix includes Javascript API we can build very slick interfaces (or as we call them Simple Edit Interfaces).

I have built a very simple example of how we can use drag-and-drop with MySource Matrix. In this example you can edit the content of the right-hand column by selecting widgets to be displayed and the order they are displayed in. As an extra, you can also modify the content of each widget. We've got a Free Text widget and a News widget, where you can enter an id for a root node (doesn't have to be a text box of course). I didn't bother creating a listing of news as this is a standard functionality.

So, here is how it's implemented:

I used drag-and-drop plugin from Nettuts+ and with minor modifications I had it working with Matrix. I have two metadata fields on the page. One stores a coma separated list of asset IDs of the assets used on the page and the second stores IDs of the assets not used. I then used an asset listing to display the assets stored in "Assets used" metadata field by using "Array of specific asset IDs" option in Dynamic Parameters. The order will be the same as the order in our metadata.

For the edit functionality, I created another asset listing, which is being nested on the page twice. In the first instance I pass a get variable which uses value of the "Assets not used" metadata field and in the second instance I pass the value of the "Assets used" metadata field. Whenever you make changes using drag-and-drop, there is a script which generates new lists of IDs and when you hit SAVE writes our values into metadata using Javascript API.
(I had a bit of a problem with one of the metadata fields being empty, which meant that our asset listings would list all available widgets when we want it to not return anything. To solve this issue, I created an Empty Widget of type CSS File with an empty customised type format in each asset listing. I then modified the script to set the metadata field value to the ID of our CSS File if a list is empty).

There is also a metadata field which stores the content of the Free Text widget and another field to store the News root node.

Comments:

Your Name

Your Email

Your Comment

Enter characters from the image on the left