Test Drag and drop with MochiKit : Drag Drop « Mochkit « JavaScript DHTML

Test Drag and drop 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 -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <title>Test Drag and drop with MochiKit</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
.drag {
    background-color: blue;
    width: 100px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;

#dropzones {
    margin-top: 100px;
    display: inline;

.drop {
    background-color: red;
    width: 100px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    display: inline;

.droptrans {
    width: 100px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;

.drop-hover {
    border: 2px solid green;

.drop-active {
    background-color: #FF79ED;

.drag-select {
    background-color: green;

#drag-5 {
    position: fixed;
    top: 100px;
    left: 200px;
#drag-6 {
    position: absolute;
    top: 100px;
    left: 350px;
#drag-7 {
    position: relative;
    top: -100px;
    left: 500px;
#drop-6 {
    display: inline;
#droptext {
    margin-top: 20px;
    border: 1px dashed black;
    padding: 10px;
    <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>
    <h3>Drag and Drop examples.</h3>
        <div id="drag-1" class="drag">test drag 1</div>
        <div id="drag-2" class="drag">test drag 2 (horizontal)</div>
        <div id="drag-3" class="drag">test drag 3 (vertical)</div>
        <div id="drag-4" class="drag">test drag 4 (selectclass)</div>
        <div id="drag-5" class="drag">test drag 5 (fixed)</div>
        <div id="drag-6" class="drag">test drag 6 (absolute)</div>
        <div id="drag-7" class="drag">test drag 7 (relative)</div>
        <div id="drag-8" class="drag">test drag 8 (handle)</div>
        <div id="handle" class="drag">handle for drag 8</div>
    <div id="dropzones">
        <div id="drop-1" class="drop">test drop 1</div>
        <div id="drop-2" class="drop">test drop 2 (hoverclass)</div>
        <div id="drop-3" class="drop">test drop 3 (activeclass)</div>
        <div id="drop-4" class="drop">test drop 4 (hoverFunc)</div>
        <div id="drop-5" class="drop">test drop 5 (activeFunc)</div>
        <div id="drop-6">test drop 6</div>
        <div id="droptext">No select</div>
    <script type="text/javascript">
    var saveTxt = "";
    onHoverFunc = function (element, onhover) {
        if (onhover) {
            saveTxt = element.childNodes[0].nodeValue;
            element.childNodes[0].nodeValue = "Please drop on me!";
        } else {
        element.childNodes[0].nodeValue = saveTxt;
    onActiveFunc = function (element, dragElt) {
        element.childNodes[0].nodeValue += " and I'm active ! (" + dragElt.id + ")";
    onDesactiveFunc = function (element, dragElt) {
        var ind = element.childNodes[0].nodeValue.lastIndexOf(" and I'm active !");
        element.childNodes[0].nodeValue = element.childNodes[0].nodeValue.slice(0, ind);
    onSelectFunc = function (element) {
        new MochiKit.Visual.Highlight(element);
    onDeselectFunc = function (element) {
        element.childNodes[0].nodeValue += ".";
    ondrop = function (element, dropElt) {
        MochiKit.DOM.getElement('droptext').childNodes[0].nodeValue = "Selected: " + element.id;
    new MochiKit.DragAndDrop.Draggable('drag-1', {'revert': true, 'ghosting': true});
    new MochiKit.DragAndDrop.Draggable('drag-2', {'revert': true, 'constraint': 'horizontal'});
    new MochiKit.DragAndDrop.Draggable('drag-3', {'revert': true, 'constraint': 'vertical'});
    new MochiKit.DragAndDrop.Draggable('drag-4', {'revert': true, 'selectclass': 'drag-select'});
    new MochiKit.DragAndDrop.Draggable('drag-5', {'revert': true, 'starteffect': onSelectFunc, 'endeffect': onDeselectFunc});
    new MochiKit.DragAndDrop.Draggable('drag-6', {'revert': true});
    new MochiKit.DragAndDrop.Draggable('drag-7', {'revert': true});
    new MochiKit.DragAndDrop.Draggable('drag-8', {'revert': true, 'handle': 'handle'});

    new MochiKit.DragAndDrop.Droppable('drop-1', {'ondrop': ondrop});
    new MochiKit.DragAndDrop.Droppable('drop-2', {'ondrop': ondrop, 'hoverclass': 'drop-hover'});
    new MochiKit.DragAndDrop.Droppable('drop-3', {'ondrop': ondrop, 'activeclass': 'drop-active'});
    new MochiKit.DragAndDrop.Droppable('drop-4', {'ondrop': ondrop, 'hoverfunc': onHoverFunc});
    new MochiKit.DragAndDrop.Droppable('drop-5', {'ondrop': ondrop, 'onactive': onActiveFunc, 'ondesactive': onDesactiveFunc});
    new MochiKit.DragAndDrop.Droppable('drop-6', {'ondrop': ondrop, 'transparent': true});
    // -->
    Links to other samples:
    <li><a href="dnd_boxes.html">Boxes DND</a></li>
    <li><a href="dnd_hoverclass.html">Hoverclass DND</a></li>
    <li><a href="dnd_snap.html">Snap DND</a></li>
    <li><a href="dnd_ghost.html">Ghost DND</a></li>
    <li><a href="dnd_scroll.html">Scroll DND</a></li>
    <li><a href="dnd_full.html">Full DND</a></li>


Related examples in the same category

1.Drag: A Really Simple Drag Handler
2.Drag and Drop Sortable Tables with MochiKit