http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FAjax_Layer%2FDraggable_List
JavaScript DHTML/Ajax Layer/Draggable List - История изменений
2026-04-05T02:48:22Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Draggable_List&diff=1634&oldid=prev
в 09:58, 26 мая 2010
2010-05-26T09:58:48Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:58, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Draggable_List&diff=1635&oldid=prev
Admin: 1 версия
2010-05-26T07:15:46Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Drag and drop list item==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us Drag and drop functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script><br />
<style type="text/css" media="screen"><br />
#thelist li { background: green; margin:5px; padding: 30px; }<br />
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }<br />
</style><br />
</head><br />
<body><br />
<h1>script.aculo.us Drag and drop functional test file</h1><br />
<h2>Draggables/Droppables</h2><br />
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container"><br />
<ul id="thelist2" style="padding: 2px; background:red;"><br />
<li>Relatively here!</li><br />
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
<li>one</li><br />
</ul><br />
</div><br />
<pre id="debug"></pre><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
// Sortable.create("thelist", {overlap: "horizontal", constraint: false});<br />
Position.includeScrollOffsets = true;<br />
Sortable.create("thelist2",{scroll:"scroll-container"});<br />
</script><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Drag and drop list items==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<!--<br />
// RelativeLayers 0.9.7<br />
// <br />
// $Id: example2.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $<br />
// <br />
// Library for creating dynamic designs that adapt themselves to the user"s<br />
// browser environment.<br />
// <br />
// Copyright (C) 1998-2004, Geert Bevin<br />
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later<br />
// <br />
// gbevin[remove] at uwyn dot com<br />
// http://www.uwyn.ru/projects/relativelayers<br />
--><br />
<HTML><br />
<HEAD><br />
<TITLE>RelativeLayers : Available area example</TITLE><br />
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2"><br />
<!--<br />
layer1 = new RelativeLayer(<br />
"layer1Div", "", "",<br />
"100%","AUTO",LEFT,"0",TOP,"0","-50%","-50%",<br />
"100%","100%",LEFT,"50%",TOP,"50%","0","0",<br />
"#dddddd", "");<br />
layer1.setVisible(true);<br />
layer2 = new RelativeLayer(<br />
"layer2Div", "", "",<br />
"30%","50%",LEFT,"50%",TOP,"50%","0","0",<br />
"200%","AUTO",LEFT,"50%",TOP,"0","0","-50%",<br />
"#dddddd", "");<br />
layer2.setVisible(true);<br />
var htmltext = "top top top top top top top top top top<BR><BR>";<br />
for(var i = 0; i < 7; i++)<br />
{<br />
for(var j = 0; j < 5; j++)<br />
{<br />
htmltext += "This is just a bit of text to fill up space.";<br />
}<br />
htmltext += "<BR><BR>";<br />
}<br />
htmltext += "bottom bottom bottom bottom bottom<BR>";<br />
layer2.setHtml(htmltext);<br />
//--><br />
</SCRIPT><br />
</HEAD><br />
<BODY BGCOLOR="#ffffff"><br />
<DIV ID="layer1Div"><br />
<CENTER><br />
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);" ONMOUSEUP="return layer2.stopScroll();">scroll up</A><BR><br />
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll left</A><br />
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(-10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll right</A><BR><br />
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);" ONMOUSEUP="return layer2.stopScroll();">scroll down</A><BR><br />
</CENTER><br />
</DIV><br />
<DIV ID="layer2Div"><br />
</DIV><br />
</BODY><br />
</HTML><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a><br />
<br />
<br />
==Yahoo! UI Library - Drag and Drop: a sortable list==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<head><br />
<title>Yahoo! UI Library - Drag and Drop</title><br />
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css"><br />
</head><br />
<br />
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script><br />
<script type="text/javascript" src="./build/event/event.js" ></script><br />
<script type="text/javascript" src="./build/dom/dom.js"></script><br />
<script type="text/javascript" src="./build/logger/logger.js"></script><br />
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script><br />
<script type="text/javascript" src="./examples/dragdrop/js/DDList.js" ></script><br />
<script type="text/javascript"><br />
YAHOO.example.DDApp = function() {<br />
return {<br />
init: function() {<br />
var i = 0;<br />
for (j=0;j < 20;++j) {<br />
new YAHOO.example.DDList("li" + j);<br />
new YAHOO.example.DDList("li" + (j + 20));<br />
new YAHOO.example.DDList("li" + (j + 40), "right");<br />
}<br />
new YAHOO.example.DDListBoundary("hidden1");<br />
new YAHOO.example.DDListBoundary("hidden2");<br />
new YAHOO.example.DDListBoundary("hidden3", "right");<br />
// dd11 = new YAHOO.example.DDList("li11");<br />
// dd11.addToGroup("right");<br />
// dd12 = new YAHOO.example.DDList("li12");<br />
// dd12.addToGroup("right");<br />
YAHOO.util.DDM.mode = <br />
document.getElementById("ddmode").selectedIndex;<br />
}<br />
};<br />
} ();<br />
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);<br />
// YAHOO.util.DDM.useCache = false;<br />
<br />
</script><br />
<body><br />
<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div><br />
<br />
<style type="text/css"><br />
/* logger default styles */<br />
/* font size is controlled here: default 77% */<br />
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}<br />
/* width is controlled here: default 31em */<br />
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}<br />
.yui-log p {margin:1px;padding:.1em;}<br />
.yui-log button {font-family:monospace;}<br />
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}<br />
/* height is controlled here: default 20em*/<br />
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}<br />
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}<br />
.yui-log .yui-log-ft .yui-log-categoryfilters {}<br />
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}<br />
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}<br />
.yui-log .yui-log-filtergrp {margin-right:.5em;}<br />
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */<br />
.yui-log .warn {background-color:#F58516;} /* F58516 orange */<br />
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */<br />
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */<br />
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */<br />
<br />
</style><br />
<br />
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" /><br />
<div id="container"><br />
<div id="containerTop"><br />
<div id="header"><br />
<h4>&nbsp;</h4><br />
</div><br />
<div id="main"><br />
<div id="rightbar"><br />
<div id="rightBarPad"><br />
<h3>Examples</h3><br />
<script type="text/javascript"><br />
YAHOO.example.logApp = function() {<br />
return {<br />
init: function() {<br />
if (YAHOO.widget.Logger) {<br />
var reader = new YAHOO.widget.LogReader( "logDiv", <br />
{ newestOnTop: true, height: "400px" } );<br />
reader._onClickPauseBtn(null, reader);<br />
}<br />
}<br />
};<br />
} (); <br />
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);<br />
</script><br />
</h4><br />
<div id="logDiv"></div><br />
</div><br />
<br />
</div><br />
<div id="content"><br />
<form name="dragDropForm" action="javscript:;"><br />
<div class="newsItem"><br />
<h3>Sortable List</h3><br />
<p><br />
This example extends<br />
DDProxy<br />
to implement a sortable list. When a list item is dragged past the center<br />
of another list item, it is inserted before that item.<br />
The items in the first two columns can interact with items in the other<br />
column. The items in the third column are defined as a separate group,<br />
so they can only interact with other items in the third column.<br />
</p><br />
Mode: <br />
<select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex"><br />
<option value="0" selected>Point</point><br />
<option value="1">Intersect</point><br />
</select><br />
<p><br />
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong><br />
</p><br />
<table border="0"><br />
<tr><br />
<td ><br />
<ul class="listGroup1"><br />
<li id="hidden6" class="sortListHidden">Hidden</li><br />
<li id="li0" class="sortList">li 0</li><li id="li1" class="sortList">li 1</li><li id="li2" class="sortList">li 2</li><li id="li3" class="sortList">li 3</li><li id="li4" class="sortList">li 4</li><li id="li5" class="sortList">li 5</li><li id="li6" class="sortList">li 6</li><li id="li7" class="sortList">li 7</li><li id="li8" class="sortList">li 8</li><li id="li9" class="sortList">li 9</li><li id="li10" class="sortList">li 10</li><li id="li11" class="sortList">li 11</li><li id="li12" class="sortList">li 12</li><li id="li13" class="sortList">li 13</li><li id="li14" class="sortList">li 14</li><li id="li15" class="sortList">li 15</li><li id="li16" class="sortList">li 16</li><li id="li17" class="sortList">li 17</li><li id="li18" class="sortList">li 18</li><li id="li19" class="sortList">li 19</li> <li id="hidden1" class="sortListHidden">Hidden</li><br />
</ul><br />
</td><br />
<td>&nbsp;</td><br />
<td><br />
<ul class="listGroup1"><br />
<li id="hidden5" class="sortListHidden">Hidden</li><br />
<li id="li20" class="sortList">li 20</li><li id="li21" class="sortList">li 21</li><li id="li22" class="sortList">li 22</li><li id="li23" class="sortList">li 23</li><li id="li24" class="sortList">li 24</li><li id="li25" class="sortList">li 25</li><li id="li26" class="sortList">li 26</li><li id="li27" class="sortList">li 27</li><li id="li28" class="sortList">li 28</li><li id="li29" class="sortList">li 29</li><li id="li30" class="sortList">li 30</li><li id="li31" class="sortList">li 31</li><li id="li32" class="sortList">li 32</li><li id="li33" class="sortList">li 33</li><li id="li34" class="sortList">li 34</li><li id="li35" class="sortList">li 35</li><li id="li36" class="sortList">li 36</li><li id="li37" class="sortList">li 37</li><li id="li38" class="sortList">li 38</li><li id="li39" class="sortList">li 39</li><br />
<li id="hidden2" class="sortListHidden">Hidden</li><br />
</ul><br />
</td><br />
<td>&nbsp;</td><br />
<td><br />
<ul class="listGroup2"><br />
<li id="hidden4" class="sortListHidden">Hidden</li><br />
<li id="li40" class="sortList">li 40</li><li id="li41" class="sortList">li 41</li><li id="li42" class="sortList">li 42</li><li id="li43" class="sortList">li 43</li><li id="li44" class="sortList">li 44</li><li id="li45" class="sortList">li 45</li><li id="li46" class="sortList">li 46</li><li id="li47" class="sortList">li 47</li><li id="li48" class="sortList">li 48</li><li id="li49" class="sortList">li 49</li><li id="li50" class="sortList">li 50</li><li id="li51" class="sortList">li 51</li><li id="li52" class="sortList">li 52</li><li id="li53" class="sortList">li 53</li><li id="li54" class="sortList">li 54</li><li id="li55" class="sortList">li 55</li><li id="li56" class="sortList">li 56</li><li id="li57" class="sortList">li 57</li><li id="li58" class="sortList">li 58</li><li id="li59" class="sortList">li 59</li> <li id="hidden3" class="sortListHidden">Hidden</li><br />
</ul><br />
</td><br />
</tr><br />
</table><br />
</div><br />
</form><br />
</div><br />
<br />
<div id="footerContainer"><br />
<div id="footer"><br />
<p>&nbsp;</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a></div>
Admin