jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
125 lines (119 loc) • 5.84 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
<meta name="description" content="The jqxTree displays a hierarchical collection of items. You
can populate it from 'UL' or by using its 'source' property." />
<title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxTree
$('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px',
dragStart: function (item) {
if (item.label == "Community")
return false;
}
});
$('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px',
dragEnd: function (item, dropItem, args, dropPosition, tree) {
if (item.label == "Forum")
return false;
}
});
$('#treeA').css('visibility', 'visible');
$('#treeB').css('visibility', 'visible');
$("#treeA, #treeB").on('dragStart', function (event) {
$("#dragStartLog").text("Drag Start: " + event.args.label);
$("#dragEndLog").text("");
});
$("#treeA, #treeB").on('dragEnd', function (event) {
$("#dragEndLog").text("Drag End");
if (event.args.label) {
var ev = event.args.originalEvent;
var x = ev.pageX;
var y = ev.pageY;
if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
var touch = event.args.originalEvent.originalEvent.changedTouches[0];
x = touch.pageX;
y = touch.pageY;
}
var offset = $("#textarea").offset();
var width = $("#textarea").width();
var height = $("#textarea").height();
var right = parseInt(offset.left) + width;
var bottom = parseInt(offset.top) + height;
if (x >= parseInt(offset.left) && x <= right) {
if (y >= parseInt(offset.top) && y <= bottom) {
$("#textarea").val(event.args.label);
}
}
}
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div style='float: left;'>
<div id='treeA' style='visibility: hidden; float: left; margin-left: 0px;'>
<ul>
<li id='home' item-selected='true'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
</ul>
</li>
<li>Financial services</li>
<li>Community</li>
</ul>
</div>
<div style='visibility: hidden; float: left; margin-left: 20px;' id="treeB">
<ul>
<li>Products
</li>
<li item-expanded='true'>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
</ul>
</li>
<li>Knowledge base</li>
<li>Forum</li>
</ul>
</div>
<div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
<textarea rows="5" id="textarea"></textarea>
</div>
</div>
<div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
<b>Events Log:</b>
<div id="dragStartLog">
</div>
<div id="dragEndLog">
</div>
<br />
<b>Note:</b>
<br />
Dragging of "Community" is disabled.
<br />
Dropping of "Forum" is disabled.
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>