Drag’n’drop for editable elements ← Return To Blog

Development of the new client-side editable interface has moved on a big step this week, as a fully working prototype of the new drag’n’drop system reached completion. The prototype only allows for drag’n’drop integration between text, images, lists, and list items; but handles sufficiently complex interactions to prove that the new code base is a both capable and a big improvement.

Unlike the previous editable environment which only supported for the drag’n’drop placement of images and movies, the new environment, which was designed with drag’n’drop support in mind from the outset, allows any element to be dragged and dropped elsewhere on the page. Elements can even be moved into other editable collections (previously known as regions), ideal for web designs with multi-column layouts.

There are other improvements too, alignment of images and movies is now part of the drag’n’drop process, previously to align an image or movie you clicked a button to align it right, then you dragged it to it’s new position. The new environment allows you to determine the alignment based on where you drop the image or movie your dragging, so by dropping it on the right edge of a text element the image or movie will automatically align itself to the right of the text.

Finally, I just want to mention extensibility - it’s now much easier to develop your own editable elements and define how they interact with other elements. A new set of editable functions has been created which allow developers to define the behaviour of any editable element class when it is interacting with other elements. The functions are;

defineConverter(fromClass, toClass, behaviour)
defineDropper(dragClass, dropClass, dragBehaviour, dropBehaviour)
defineMerger(mergeClass, withClass, behaviour)

With these 3 functions it is now possible to implement even the most complex element interactions in a complete safe way.

Leave a Comment? | Tags: deploy, javascript, ui,