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