Using a KSS plugin for Drag-and-Drop

Author:http://jladage.myopenid.com/

This howto extends the example described in Adding AJAX to Grok with KSS

Before you can use the KSS commands provided by the plugin a number of things have to be setup:

  • Define a dependency on the plugin in setup.py,
  • Rerun buildout.

Edit the Configuration file

Add your plugin to setup.py. We add kss.plugin.yuidnd:

...
install_requires=['setuptools',
                  'grok',
                  'megrok.kss',
                  'kss.plugin.yuidnd', # <---
                  ],
...

Now run buildout to make it include the extra package:

bin/buildout

Drag-and-Drop example

In the <head> section of index.pt, add the following list of <script> tags just above the @@kss_javascript:

<script src="++resource++yahoo.js" type="text/javascript"></script>
<script src="++resource++dom.js" type="text/javascript"></script>
<script src="++resource++event.js" type="text/javascript"></script>
<script src="++resource++animation.js" type="text/javascript"></script>
<script src="++resource++dragdrop.js" type="text/javascript"></script>

<tal:kss_javascript replace="structure context/@@kss_javascript" />
<link tal:attributes="href static/app.kss"
      rel="kinetic-stylesheet" type="text/kss" />

These scripts are the parts of the Yahoo library used by the plugin; without them, KSS will crash.

Next, add two lists of items to the bottom of index.pt:

<p>You can drag and drop items on the client.</p>

<ul id="first">
  <li id="f1">Item A</li>
  <li id="f2">Item B</li>
  <li id="f3">Item C</li>
  <li id="f4">Item D</li>
</ul>

<ul id="second">
  <li id="s1">Item 1</li>
  <li id="s2">Item 2</li>
  <li id="s3">Item 3</li>
  <li id="s4">Item 4</li>
</ul>

In the first how-to the app.kss file was added to the package (in src/ksssample). In there, add the following KSS rules.

li:yuidnd-dragstart {
   evt-yuidnd-dragstart-action: delete;
}

ul:yuidnd-drop  {
    evt-yuidnd-drop-action: order;
}

The first rule binds a dragstart event on all <li>‘s. The second rule sets up a drop event on a container: All children of this container will be dynamically reordered when dropping an element.

After refreshing the page, start dragging elements from the first to the second list or even reorder elements within one list. This is all happening on the client side only at this moment, so it’s not that useful.

To notify the server when something is successfully dragged, add the following KSS rule.

li:yuidnd-dragsuccess {
  action-server: drop url('@@index/@@drop');
  drop-container: pass(dropContainerId);
  drop-index: pass(dropIndex);
}

The dragsuccess event triggers an action-server which passes two arguments.

  • container - The HTML id of the container in which the element is dropped.
  • index - The place where the element is dropped in the container.

In the app.py, add a drop method to the AppKSS class defined there in order to process the dragsuccess event. The complete class should afterwards look like this (the welcome method is not necessary for this example):

from megrok.kss import KSS
...
class AppKSS(KSS):
  grok.view(Index)

  def welcome(self):
    core = self.getCommandSet('core')
    core.replaceHTML('#click-me', '<p>ME GROK KISSED !</p>')

  def drop(self, container, index):
    """This method gets called from kss and will display a message"""
    core = self.getCommandSet('core')
    core.replaceInnerHTML(
      '#message',
      '<p>You dropped something in %s at %s !</p>' % (container, index))

The final step is to add a placeholder <div> to the bottom of the index.pt so the drop method can replace it’s contents:

<div id="message"></div>

Now restart Zope, because a new method has been added to the app.py. After refreshing the page, drag-and-drop an element and notice the message that is displayed.