js/example/dragable.html

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dragable test</title>
<script type="text/javascript" src="../../../JSAN.js"></script>
<script type="text/javascript">
window.onload = function () {
  JSAN.addRepository ("../../../");
  JSAN.use ("cx.fam.suika.y2005.DOM.Node", "DOMElement", "requireDOMNodeFeature");
  requireDOMNodeFeature
    ("http://suika.fam.cx/www/cx/fam/suika/y2005/ElementView/Movable#", "1.0");
  var el = new DOMElement (document.getElementById ("a"));
  el.setMovingElement (new DOMElement (document.getElementById ("b")));
};
</script>
<style type="text/css" media="screen">
.MOVABLE {
  position: fixed;
  _position: absolute;
  top: 0.3em; left: 4em; width: 5em; height: 2em;
  background-color: yellow;
  border: 3px dashed green;
}
.DRAGABLE {
  margin: 0;
  cursor: move;
  border: 1px solid red;
}
.DRAGING {
  color: GrayText;
  background-color: transparent;
  border-color: blue;
}
</style>
</head>

<body>
<div id="b">
<p>bbbb</p>

<p id="a">aaaa</p>

<p>aaaa</p>
</div>
</body>
</html>
1	wakaba	1.1	<!DOCTYPE html>
2			<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
3			<head>
4			<title>Dragable test</title>
5			<script type="text/javascript" src="../../../JSAN.js"></script>
6			<script type="text/javascript">
7			window.onload = function () {
8			JSAN.addRepository ("../../../");
9			JSAN.use ("cx.fam.suika.y2005.DOM.Node", "DOMElement", "requireDOMNodeFeature");
10			requireDOMNodeFeature
11			("http://suika.fam.cx/www/cx/fam/suika/y2005/ElementView/Movable#", "1.0");
12			var el = new DOMElement (document.getElementById ("a"));
13			el.setMovingElement (new DOMElement (document.getElementById ("b")));
14			};
15			</script>
16			<style type="text/css" media="screen">
17			.MOVABLE {
18			position: fixed;
19			_position: absolute;
20			top: 0.3em; left: 4em; width: 5em; height: 2em;
21			background-color: yellow;
22			border: 3px dashed green;
23			}
24			.DRAGABLE {
25			margin: 0;
26			cursor: move;
27			border: 1px solid red;
28			}
29			.DRAGING {
30			color: GrayText;
31			background-color: transparent;
32			border-color: blue;
33			}
34			</style>
35			</head>
36
37			<body>
38			<div id="b">
39			<p>bbbb</p>
40
41			<p id="a">aaaa</p>
42
43			<p>aaaa</p>
44			</div>
45			</body>
46			</html>