Drag and Drop Sortable Tables with MochiKit : Drag Drop « Mochkit « JavaScript DHTML

Drag and Drop Sortable Tables with MochiKit

MochiKit is dual-licensed software.  It is available under the terms of the
MIT License, or the Academic Free License version 2.1.  The full text of
each license is included below.

<!-- Code revised from MochiKit demo code -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <title>Drag and Drop Sortable Tables with MochiKit</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;

#dnd_sortable {
  margin: 0;
  margin-top: 10px;
  padding: 0;
  list-style-type: none;
  width: 250px;

#dnd_sortable li {
    margin: 0;
    margin-bottom: 4px;
    padding: 5px;
    border: 1px solid #888;
    cursor: move;
    text-align: center;

        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Position.js"></script>
        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Visual.js"></script>
        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/DragAndDrop.js"></script>
        <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/Sortable.js"></script>
            Drag and Drop Sortable Tables with MochiKit
            View Source: [
                <a href="index.html" class="view-source">index.html</a> 
        <ul id="dnd_sortable">
            <a onclick="validate()">Validate order choice</a>
<script type="text/javascript">

validate = function () {
    var children = MochiKit.DOM.getElement("dnd_sortable").childNodes;
    var res = '';
    for (var i = 0; i < children.length; i++) {
        res += children[i].firstChild.nodeValue + ' ';



Related examples in the same category

1.Test Drag and drop with MochiKit
2.Drag: A Really Simple Drag Handler