dndtouch2
Version:
from dragdroptouch of Bernardo Castilho
90 lines (82 loc) • 3.98 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DragDropTouch</title>
<!-- Angular/Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Wijmo -->
<link href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.grouppanel.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.olap.min.js" type="text/javascript"></script>
<!-- Wijmo-Angular interop -->
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
<!-- app scripts/styles -->
<link href="app.css" rel="stylesheet" />
<script src="../DragDropTouch.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<div class="container">
<h2>
Drag and Drop Touch
</h2>
<p>
This sample is based on the <b>html5rocks</b> page at
<a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">
http://www.html5rocks.com/en/tutorials/dnd/basics/
</a>.</p>
<p>
The original sample uses HTML5 drag and drop events, and therefore
works only with the mouse.</p>
<p>
This version uses the <b>DragDropTouch</b> polyfill so you should
be able to drag the rectangles to new positions using the mouse or
touch.</p>
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
<div class="column" draggable="true"><header>X</header></div>
</div>
<h2>
Works with <a href="https://wijmo.com/5/docs/topic/wijmo.grid.FlexGrid.Class.html">FlexGrid</a>
</h2>
<p>
Drag columns to new positions using the mouse or touch:</p>
<wj-group-panel grid="flex"
placeholder="Drag columns here to create groups">
</wj-group-panel>
<wj-flex-grid style="max-height:200px"
control="flex"
items-source="data"
defer-resizing="true">
</wj-flex-grid>
<wj-flex-grid style="max-height:200px"
control="flex"
items-source="data">
<wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>
<h2>
Works with <a href="https://wijmo.com/5/docs/topic/wijmo.olap.PivotPanel.Class.html">PivotPanel</a>
</h2>
<p>
Drag fields to new build pivot tables using the mouse or touch:</p>
<div class="row">
<div class="col-md-4">
<wj-pivot-panel control="thePanel"
items-source="data">
</wj-pivot-panel>
</div>
<div class="col-md-8">
<wj-pivot-grid items-source="thePanel">
</wj-pivot-grid>
</div>
</div>
</div>
</body>
</html>