Viewing File: /usr/local/cpanel/3rdparty/share/angular-ui-scroll/1.6.1/demo/grid-dnd-sort/grid-dnd-sort.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Grid dnd sort</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
	<script src="../../dist/ui-scroll.js"></script>
	<script src="../../dist/ui-scroll-grid.js"></script>
	<script src="grid-dnd-sort.js"></script>
	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
	<link rel="stylesheet" href="grid.css" type="text/css"/>
</head>
<body ng-controller="gridController" ng-app="application">
<div class="cont cont-global">

	<a class="back" href="../index.html">browse other examples</a>

	<h1 class="page-header page-header-exapmle">Grid drag and drop sort, moveBefore</h1>

	<div class="description">
		<div class="code">
		Here two methods are being demonstrated. columnFromPoint() which allows you to get the appropriate ColumnAdapter object by coordinates:
				<pre>
target = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY)</pre>
		Another method is moveBefore() which provides an ability to move one column in front of another:
				<pre>
column.moveBefore(target)</pre>
		</div>
	</div>

	<table class="grid" ui-scroll-viewport>
		<thead style="display:block">
		<tr dnd-sortable-list="headers" >
			<th ng-repeat="item in headers"
				draggable="true"
					ondragstart="angular.element(arguments[0].currentTarget).scope().dragStart(arguments[0])"
					ondragover="angular.element(arguments[0].currentTarget).scope().dragOver(arguments[0])"
					ondrop="angular.element(arguments[0].currentTarget).scope().dragDrop(arguments[0])"
				class="col{{item.index + 1}}"
				ui-scroll-th>
				{{item.name}}
			</th>
		</tr>
		</thead>
		<tbody>
		<tr class="row" ui-scroll="item in datasource" adapter="adapter">
			<td ui-scroll-td class="col1">{{item.col1}}</td>
			<td ui-scroll-td class="col2">{{item.col2}}</td>
			<td ui-scroll-td class="col3">{{item.col3}}</td>
		</tr>
		</tbody>
	</table>

</div>
</body>
</html>
Back to Directory