Adding Drag & Drop re-ordering to older Plone instances

by Sven Deichmann — last modified Dec 30, 2008 03:03 PM
You are maintaining some older Plone instances that you don't want to update, but want that fancy drag and drop folder re-ordering of Plone 2.5? Then this is for you.
  • To have your older instances use the folder-reordering js of Plone 2.5 you will need 2 files from the Plone 2.5 package:

- dragdropreorder.js (e.g. from http://svn.plone.org/svn/plone/CMFPlone/tags/2.5/skins/plone_ecmascript/dragdropreorder.js)

and

- folder_moveitem.py (e.g. from http://svn.plone.org/svn/plone/CMFPlone/tags/2.5/skins/plone_scripts/folder_moveitem.py)

  • Put them to your own instance's skin folders in the filesystem (it does not really matter where as long as they are reachable via acquisition).

(If you want to do this stuff in the ZMI, remember to leave out file endings like pt or py in the id and choose the right type. (Actually that is more complicated and you need a bit more to know what you are doing, even if it looks easier))

  • Add dragdropreorder.js to the javascript registry (in Plone 2.5 it resides right under dropdown.js, but I don't know if it's really important)
    (if you don't know where the javascript registry is: it's the thing named portal_javascript under the portal root)

  • find the lines reading:
	item_folderish item/is_folderish|item/isPrincipiaFolderish|nothing"
tal:attributes="class python:test(oddrow, 'even', 'odd')" >

in your folder_contents.pt (in unmodified instances thats under CMFPlone/skins/plone_templates) and change them to:

         item_folderish item/is_folderish|item/isPrincipiaFolderish|nothing"
tal:attributes="class python:test(oddrow, 'draggable even', 'draggable odd');
                id item_id;" >

  • add some lines to your authoring.css.dtml (usually in CMFPlone/skins/plone_styles) for the highlighting of the currently dragged lines (drag and drop will work without that, but that makes life easier):
/* for draggable elements */
tr.dragging td {
    background: red;
}
.draggable {
    cursor: move;
}


(paste them at the end, but ABOVE /* </dtml-with> */


  • done