в 10:00, 26 мая 2010

2010-05-26T10:00:07Z

Admin: 1 версия

2010-05-26T07:25:22Z

1 версия

Новая страница

==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;
}
#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>

</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>
<h1>
Dragging with MochiKit
</h1>
<p>
This is an example of one might implement a drag handler with
MochiKit’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>

</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;
}
#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">

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

</source>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/Mochkit/Drag Drop - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия