- Error
Tue 14 Jul 2009 |
Drag 'n' Drop is here!
Written by Ankit Ahuja
It’s been more than a week since I last updated you on my project that is dealing with increasing the frontend editing capability of Joomla! I’m excited to announce that this week I was able to implement Drag ‘n’ Drop placement of modules. In addition to that, I was able to fix some bugs and refine the code. You can download the latest release from JC -> http://joomlacode.org/gf/project/frediting/frs/.
Here is a brief summary of how I’m implementing drag and drop for modules. For the JavaScript part, I’m using the Mootools Sortables class. To enable drag and drop for a particular position, you have to provide the container of the modules with the attribute ‘data-position’ in your template’s ‘index.php’. So, if, for example, you’ve a DIV that contains all the modules at the left position, then you’ll give it the attribute data-position=’left’. In most cases, the value of 'data-position' matches the value of the 'name' attribute of the jdoc:include statement. Here is a code example:
<div id="newsflash" data-position="newsflash"> <jdoc:include type="modules" name="newsflash" style="raw editor" /> </div>
The ‘data-’ type of attribute is supported in HTML 5. I might choose an alternative attribute, such as ‘rel’ or ‘alt’ but the idea of using a unique attribute is so that it does not interfere with the layout of any template. You can give this attribute to all DIV Containers for whose positions you want to enable Drag and Drop. So, for example, if you want to leave out the footer, simply don’t include the ‘data-position’ attribute in its container.
When you drag and drop the module into a new position and/or order, an AJAX request is sent to the method ‘saveOrder’ in the module controller. The controller method then saves the new position and/or order.
In addition to the demo, I have now set up my project at joomlacode.org so that you can help me find bugs. For now, the SVN source is still at labs. I’m in the process of moving my SVN repository to Joomla Code.
I might think about implementing editing of menu parameters if time permits. But, atleast for the following week, I’ll be fixing bugs and glitches in code as well as refining it and adding support for IE. I also have to start working on an administrative interface where you’ll be able to configure the behavior of the plugin, including setting the background-color on hover over titles, specifying unique classes for containers of article and page titles, etc.
Important Links
SVN Source: http://labs.joomla.org/svn/labs/playground/people/ankit
Bug Tracker: http://joomlacode.org/gf/project/frediting/tracker/
Latest Release: http://joomlacode.org/gf/project/frediting/frs/
Demo: http://ankitahuja.com/playground/joomla
2009-07-14 15:20:39
2009-07-14 15:54:32
2009-07-14 16:18:20
2009-07-14 16:42:40
However, I keep getting an error alert message popping up saying that ¨The URL is not valid and cannot be loaded¨
2009-07-14 17:58:07
I'm just a little lazy to set up the demo all over again.
2009-07-14 20:20:21
2009-07-14 20:44:31
2009-07-14 21:56:15
2009-07-15 00:06:55
...nothing more is needed.
2009-07-15 01:37:47
Should this work with a any module in any position or is it limited to moving modules assigned to the same position?
2009-07-15 02:03:41
The one thing I noticed is that I couldn't drag a module into a position unless it already had at least one module in it.
2009-07-15 04:00:50
2009-07-15 06:24:45
2009-07-15 08:37:19
2009-07-15 12:29:00
2009-07-15 16:19:49
guysmiley: It should work with any module in any position.
unleash.it, AaronF: I think I'll give this a thought and see if I'm able to come up with something.
2009-07-15 19:39:53
2009-07-16 10:56:15
2009-07-25 10:46:43