JavaScript DHTML/Mochkit/Drag Drop

Материал из Web эксперт
Перейти к: навигация, поиск

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">
<html>
    <head>
        <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;
}
        
        </style>
        <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>
    </head>
    <body>
        <h1>
            Drag and Drop Sortable Tables with MochiKit
        </h1>
        <p>
            View Source: [
                <a href="index.html" class="view-source">index.html</a> 
            ]
        </p>
        <ul id="dnd_sortable">
            <li>mochibot.ru</li>
            <li>pythonmac.org</li>
            <li>undefined.org</li>
            <li>python.org</li>
        </ul>
        <p>
            <a onclick="validate()">Validate order choice</a>
        </p>
<script type="text/javascript">
MochiKit.Sortable.Sortable.create("dnd_sortable");
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 + " ";
    }
    alert(res);
}
</script>
    </body>
</html>



Drag: A Really Simple Drag Handler

 
<!--
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.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Signal Example</title>
    <style type="text/css">
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;
}
.draggable
{
    color: white;
    cursor: move;
    font-size: 25px;
    height: 100px;
    line-height: 100px;
    position: absolute;
    text-align: center;
    top: 200px;
    width: 100px;
}
.blue { background: blue; }
.green { background: green; }
.red { background: red; }
.white
{
    background: white;
    border: 1px solid black;
    color: black;
}
    
    </style>
    <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
    <script type="text/javascript">
/*
    Drag: A Really Simple Drag Handler
    
*/
Drag = {
    _move: null,
    _down: null,
    
    start: function(e) {
        e.stop();
        
        // We need to remember what we"re dragging.
        Drag._target = e.target();
        
        /*
            There"s no cross-browser way to get offsetX and offsetY, so we
            have to do it ourselves. For performance, we do this once and
            cache it.
        */
        Drag._offset = Drag._diff(
            e.mouse().page,
            getElementPosition(Drag._target));
        
        Drag._move = connect(document, "onmousemove", Drag._drag);
        Drag._down = connect(document, "onmouseup", Drag._stop);
    },
    _offset: null,
    _target: null,
    
    _diff: function(lhs, rhs) {
        return new MochiKit.Style.Coordinates(lhs.x - rhs.x, lhs.y - rhs.y);
    },
        
    _drag: function(e) {
        e.stop();
        setElementPosition(
            Drag._target,
            Drag._diff(e.mouse().page, Drag._offset));
    },
    
    _stop: function(e) {
        disconnect(Drag._move);
        disconnect(Drag._down);
    }
};
connect(window, "onload",   
    function() {
        /*
            Find all DIVs tagged with the draggable class, and connect them to
            the Drag handler.
        */
        var d = getElementsByTagAndClassName("DIV", "draggable");
        forEach(d,
            function(elem) {
                connect(elem, "onmousedown", Drag.start);
            });
                        
    });
    
connect(window, "onload",
    function() {
        var elems = getElementsByTagAndClassName("A", "view-source");
        var page = "draggable/";
        for (var i = 0; i < elems.length; i++) {
            var elem = elems[i];
            var href = elem.href.split(/\//).pop();
            elem.target = "_blank";
            elem.href = "../view-source/view-source.html#" + page + href;
        } 
    });
    
    </script>
</head>
<body>
    <h1>
        Dragging with MochiKit
    </h1>
    <p>
        This is an example of one might implement a drag handler with
        MochiKit&#8217;s Signal.
    </p>
    <p>
        For a detailed description of what happens under the hood, check out
        <a href="draggable.js" class="view-source">draggable.js</a>.
    </p>
    <p>
        View Source: [
            <a href="index.html" class="view-source">index.html</a> | 
            <a href="draggable.js" class="view-source">draggable.js</a> |
            <a href="draggable.css" class="view-source">draggable.css</a>
        ]
    </p>

    <div class="draggable red" style="left: 10px;">R</div>
    <div class="draggable green" style="left: 120px;">G</div>
    <div class="draggable blue" style="left: 230px;">B</div>
    <div class="draggable white" style="left: 340px;">W</div>
</body>
</html>



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 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <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;
}
    
    
    </style>
    <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>
  </head>
  <body>
    <h3>Drag and Drop examples.</h3>
    <div>
        <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>
    <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>
    </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.Visual.pulsate(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});
    // -->
    </script>
    <div>
    Links to other samples:
    <ul>
    <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>
    </ul>
    </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Mochkit/Drag_Drop&oldid=3238»