LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


dragover(e)

Occurs when item is dragged over TreeView space.

Event Data

ParamTypeDetails
eObjectAn event object which contains data about drag-drop operation

Remarks

The following objects are carried with this event:

  • dragItem - the item object that is dragged
  • targetItem - the item object over which mouse cursor is currently positioned
  • isDropAllowed - a Boolean value stating whether dragged item is allowed to drop
  • dropPos - the position where dragged item will be placed. Here is a list of dropPos values:
    • -1, item will be placed to the end of tree hierarchy as a root item
    • 0, item on drop will become child of target item
    • 1, item will be placed above target item
    • 2, item will be placed below target item
  • mousePos - the position of mouse cursor in page coordinates

This event can be handled by binding the 'dragover' event to the TreeView widget object.

Version Information

Supported in: v1.0.

Example

In this example we are showing how to handle dragover event in TreeView widget.

$(document).ready(function() {

// Create an instance of TreeView widget

var $tree = $('#treeview').treeview();

 

$tree.on({

"dragover": function(e){

if (e.dragItem && e.targetItem)

console.log("Item: " + e.dragItem.text + " is dragged over target: " + e.targetItem.text + " 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;

}

Samples

See Also