mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
130 lines
5.0 KiB
HTML
130 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="app">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Angular DragDrop (Demo)</title>
|
|
<script>document.write('<base href="' + document.location + '" />');</script>
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js" data-semver="1.4.3"></script>
|
|
<script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="../draganddrop.js"></script>
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body >
|
|
<div class="container">
|
|
<div class="row topRow">
|
|
<h4 class="heading">
|
|
Drag and drop between the two lists.
|
|
</h4>
|
|
</div>
|
|
|
|
<h3>Beasts</h3>
|
|
|
|
<p>Left column of beasts is not draggable and accepts both beasts and priests</p>
|
|
|
|
<hr>
|
|
|
|
<div class="row" ng-controller="MainCtrl">
|
|
<div class="col-xs-6">
|
|
<ul ui-on-drop="onDrop($event,$data,men)" drag-enter-class="on-drag-enter-custom"
|
|
drop-channel="beasts,priests"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)">
|
|
<li ui-draggable="false" drag="man" drag-channel="beasts"
|
|
on-drop-success="dropSuccessHandler($event,$index,men)"
|
|
ng-repeat="man in men track by $index">
|
|
{{man}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<ul ui-on-drop="onDrop($event,$data,women)"
|
|
drop-channel="beasts"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)">
|
|
<li ui-draggable="true" drag="woman" drag-channel="beasts"
|
|
on-drop-success="dropSuccessHandler($event,$index,women)"
|
|
ng-repeat="woman in women track by $index">
|
|
{{woman}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Priests</h3>
|
|
|
|
<hr>
|
|
|
|
<div class="row" ng-controller="MainCtrl">
|
|
<div class="col-xs-6">
|
|
<ul ui-on-drop="onDrop($event,$data,men)"
|
|
drop-channel="priests"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)">
|
|
<li ui-draggable="true" drag="man"
|
|
drag-channel="priests"
|
|
on-drop-success="dropSuccessHandler($event,$index,men)"
|
|
ng-repeat="man in men track by $index">
|
|
{{man}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<ul ui-on-drop="onDrop($event,$data,women)"
|
|
drop-channel="priests"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)">
|
|
<li ui-draggable="true" drag="woman"
|
|
drag-channel="priests"
|
|
on-drop-success="dropSuccessHandler($event,$index,women)"
|
|
ng-repeat="woman in women track by $index">
|
|
{{woman}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Terrorists</h3>
|
|
|
|
<p>Each terrorist list item accepts a new terrorist. Shows inserting into a particular
|
|
position in an array.</p>
|
|
|
|
<hr>
|
|
|
|
|
|
<div class="row" ng-controller="MainCtrl">
|
|
<div class="col-xs-6">
|
|
<ul>
|
|
<li ui-draggable="true" drag="man"
|
|
drag-channel="terrorists2"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)"
|
|
drag-hover-class="on-drag-hover-custom"
|
|
on-drop-success="dropSuccessHandler($event,$index,men)"
|
|
ui-on-drop="onDrop($event,$data,men,$index)" drop-channel="terrorists1"
|
|
ng-repeat="man in men track by $index">
|
|
{{man}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<ul>
|
|
<li ui-draggable="true" drag="woman"
|
|
drag-channel="terrorists1"
|
|
drop-validate="dropValidateHandler($drop, $event, $data)"
|
|
drag-hover-class="on-drag-hover-custom"
|
|
ui-on-drop="onDrop($event,$data,women,$index)" drop-channel="terrorists2"
|
|
on-drop-success="dropSuccessHandler($event,$index,women)"
|
|
ng-repeat="woman in women track by $index">
|
|
{{woman}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|