Advanced User Interface Controls and Components
Occurs when dragged item leaves TreeView space.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the dragItem and mousePos objects |
This event can be handled by binding the 'dragleave' event to the TreeView widget object.
The mousePos object associated with this event holds coordinates of mouse position relative to the parent page.
Supported in: v1.0.
In this example we are showing how to handle dragleave event by using the drag-leave attribute of TreeView widget.
$(document).ready(function() {
// Create an instance of TreeView widget
var $tree = $('#treeview').treeview();
$tree.on({
"dragleave": function(e){
if (e.dropItem && e.targetItem)
alert("Item: " + e.dragItem.text + " is dragged at position: { x: " + e.mousePos.x + ", y: " + e.mousePos.y + " }");
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>
</head>
<body>
<div id="treeview" class="widget">
<ul>
<li><span>Item1</span></li>
<li><span>Item2</span>
<ul>
<li><span>Item21</span></li>
<li>><span>Item22</span></li>
<li data-expanded=false><span>Item23</span></li>
<ul>
<li><span>Item231</span></li>
<li data-expanded=false><span>Item232</span>
<ul>
<li><span>Item2321</span></li>
<li><span>Item2322</span></li>
</ul>
</li>
<li><span>Item233</span></li>
</ul>
</li>
<li><span>Item24</span></li>
</ul>
</li>
<li data-expanded=false><span>Item3</span></li>
<ul>
<li><span>Item31</span></li>
<li><span>Item32</span></li>
<li><span>Item33</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}