iapt-platform
/
mint
-ын хуулбар https://github.com/iapt-platform/mint.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html><head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - Example: Drag'n'drop</title>
<!--
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js" type="text/javascript"></script>

	<script src="http://codeorigin.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
	<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>

	<link href="../../node_modules/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css" class="skinswitcher">
	<!--
	<script src="jquery.fancytree.js" type="text/javascript"></script>
	<script src="jquery.fancytree.dnd.js" type="text/javascript"></script>
	-->
	<script src="../../node_modules/jquery.fancytree/dist/jquery.fancytree.js" type="text/javascript"></script>
	<script src="../../node_modules/jquery.fancytree/dist/modules/jquery.fancytree.dnd.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
	<!-- End_Exclude -->
<style type="text/css">
	#draggableSample, #droppableSample {
		height:100px;
		padding:0.5em;
		width:150px;
		border:1px solid #AAAAAA;
	}
	#draggableSample {
		background-color: silver;
		color:#222222;
	}
	#droppableSample {
		background-color: maroon;
		color: white;
	}
	#droppableSample.drophover {
		border: 1px solid green;
	}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
	$(function(){
		// Attach the fancytree widget to an existing <div id="tree"> element
		// and pass the tree options as an argument to the fancytree() function:
		$("#tree").fancytree({
			extensions: ["dnd"],
			source: [
	{"title": "simple node (no explicit id, so a default key is generated)" },
	{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
	{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
	{"key": "4", "title": "node 4" },
	{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
	{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
	{"key": "10", "title": "Folder 1", "folder": true, "children": [
		{"key": "10_1", "title": "Sub-item 1.1", "children": [
			{"key": "10_1_1", "title": "Sub-item 1.1.1"},
			{"key": "10_1_2", "title": "Sub-item 1.1.2"}
		]},
		{"key": "10_2", "title": "Sub-item 1.2", "children": [
			{"key": "10_2_1", "title": "Sub-item 1.2.1"},
			{"key": "10_2_2", "title": "Sub-item 1.2.2"}
		]}
	]},
	{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
		{"key": "20_1", "title": "Sub-item 2.1", "children": [
			{"key": "20_1_1", "title": "Sub-item 2.1.1"},
			{"key": "20_1_2", "title": "Sub-item 2.1.2"}
		]},
		{"key": "20_2", "title": "Sub-item 2.2", "children": [
			{"key": "20_2_1", "title": "Sub-item 2.2.1"},
			{"key": "20_2_2", "title": "Sub-item 2.2.2"}
		]}
	]},
	{"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
	{"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
	{"key": "32", "title": "Lazy folder 3", "folder": true, "lazy": true }
]
			,
			dnd: {
				preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
				preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
				autoExpandMS: 400,
				onDragStart: function(node) {
					/** This function MUST be defined to enable dragging for the tree.
					 *  Return false to cancel dragging of node.
					 */
					return true;
				},
				onDragEnter: function(node, sourceNode) {
					/** sourceNode may be null for non-fancytree droppables.
					 *  Return false to disallow dropping on node. In this case
					 *  onDragOver and onDragLeave are not called.
					 *  Return 'over', 'before, or 'after' to force a hitMode.
					 *  Return ['before', 'after'] to restrict available hitModes.
					 *  Any other return value will calc the hitMode from the cursor position.
					 */
					// Prevent dropping a parent below another parent (only sort
					// nodes under the same parent)
/* 					if(node.parent !== sourceNode.parent){
						return false;
					}
					// Don't allow dropping *over* a node (would create a child)
					return ["before", "after"];
*/
				   return true;
				},
				onDrop: function(node, sourceNode, hitMode, ui, draggable) {
					/** This function MUST be defined to enable dropping of items on
					 *  the tree.
					 */
					sourceNode.moveTo(node, hitMode);
				}
			},
			activate: function(e, data) {
//				alert("activate " + data.node);
			}
		});
	});
</script>
</head>
<body class="example">
	<h1>Example: 'dnd' extension</h1>
	<div class="description">
		This sample shows drag'n'drop support.
	</div>
	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"><option value="xp">XP</option><option value="vista">Vista (classic Dynatree)</option><option value="win7">Win7</option><option value="win8">Win8</option><option value="lion">Lion</option></select>
	</div>

	<!-- Add a <table> element where the tree should appear: -->
	<div id="tree">
	<ul class="ui-fancytree fancytree-container" tabindex="0"><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">simple node (no explicit id, so a default key is generated)</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title" title="Look, a tool tip!">item1 with key and tooltip</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title"><span>item2 with <b>html</b> inside a span tag</span></span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">node 4</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">using href</span></span></li><li class=""><span class="fancytree-node my-extra-class fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">node with some extra classes (will be added to the generated markup)</span></span></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-exp-c fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Folder 1</span></span></li><li class=""><span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-exp-e fancytree-ico-e"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Simple node with active children (expand)</span></span><ul><li class=""><span class="fancytree-node fancytree-has-children fancytree-exp-c fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Sub-item 2.1</span></span></li><li class="fancytree-lastsib"><span class="fancytree-node fancytree-has-children fancytree-lastsib fancytree-exp-cl fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Sub-item 2.2</span></span></li></ul></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lazy fancytree-exp-cd fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder</span></span></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lazy fancytree-exp-cd fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder 2</span></span></li><li class="fancytree-lastsib"><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lastsib fancytree-lazy fancytree-exp-cdl fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder 3</span></span></li></ul></div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="https://github.com/mar10/fancytree" style="display: none;">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="index.html" style="display: none;">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p><p class="version-info">Fancytree 2.0.0-1, jQuery UI 1.10.4, jQuery 1.11.1</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->


</body></html>