JavaScript DHTML/Mochkit/Drag Drop

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

Drag and Drop Sortable Tables with MochiKit

   <source lang="html4strict">


<!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;

}

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

}

  1. 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>

Drag and Drop Sortable Tables with MochiKit

View Source: [ <a href="index.html" class="view-source">index.html</a> ]

  • mochibot.ru
  • pythonmac.org
  • undefined.org
  • python.org

<a onclick="validate()">Validate order choice</a>

<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> 

 </source>


Drag: A Really Simple Drag Handler

   <source lang="html4strict">


<!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>

Dragging with MochiKit

This is an example of one might implement a drag handler with MochiKit’s Signal.

For a detailed description of what happens under the hood, check out <a href="draggable.js" class="view-source">draggable.js</a>.

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> ]

R
G
B
W

</body> </html> 

 </source>


Test Drag and drop with MochiKit

   <source lang="html4strict">


<!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;

}

  1. 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;

}

  1. drag-5 {
   position: fixed;
   top: 100px;
   left: 200px;

}

  1. drag-6 {
   position: absolute;
   top: 100px;
   left: 350px;

}

  1. drag-7 {
   position: relative;
   top: -100px;
   left: 500px;

}

  1. drop-6 {
   display: inline;

}

  1. 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>

Drag and Drop examples.

test drag 1
test drag 2 (horizontal)
test drag 3 (vertical)
test drag 4 (selectclass)
test drag 5 (fixed)
test drag 6 (absolute)
test drag 7 (relative)
test drag 8 (handle)
handle for drag 8
test drop 1
test drop 2 (hoverclass)
test drop 3 (activeclass)
test drop 4 (hoverFunc)
test drop 5 (activeFunc)
test drop 6
No select
   <script type="text/javascript">
   
   </script>

   Links to other samples:
  • <a href="dnd_boxes.html">Boxes DND</a>
  • <a href="dnd_hoverclass.html">Hoverclass DND</a>
  • <a href="dnd_snap.html">Snap DND</a>
  • <a href="dnd_ghost.html">Ghost DND</a>
  • <a href="dnd_scroll.html">Scroll DND</a>
  • <a href="dnd_full.html">Full DND</a>
   </body>

</html> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Mochkit/Drag_Drop&oldid=3239»