diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/timeline/other/drag&drop.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/timeline/other/drag&drop.html')
| -rw-r--r-- | www/lib/vis/examples/timeline/other/drag&drop.html | 131 |
1 files changed, 0 insertions, 131 deletions
diff --git a/www/lib/vis/examples/timeline/other/drag&drop.html b/www/lib/vis/examples/timeline/other/drag&drop.html deleted file mode 100644 index 81bcb1f1..00000000 --- a/www/lib/vis/examples/timeline/other/drag&drop.html +++ /dev/null @@ -1,131 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <meta charset="utf-8"/> - <title>Timeline | Drag & Drop</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <script src="../../googleAnalytics.js"></script> - - <style type="text/css"> - li.item { - list-style: none; - width: 150px; - color: #1A1A1A; - background-color: #D5DDF6; - border: 1px solid #97B0F8; - border-radius: 2px; - margin-bottom: 5px; - padding: 5px 12px; - } - li.item:before { - content: "≣"; - font-family: Arial, sans-serif; - display: inline-block; - font-size: inherit; - cursor: move; - } - </style> -</head> - -<body> - -<h1>Timeline Drag & Drop Example</h1> - -<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p> - -<div id="mytimeline" ></div> -<div> - <h3>Items:</h3> - <ul class="items"> - <li draggable="true" class="item"> - item 1 - box - </li> - <li draggable="true" class="item"> - item 2 - point - </li> - <li draggable="true" class="item"> - item 3 - range - </li> - </ul> -</div> - -<script> - - // create groups - var numberOfGroups = 3; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items - var numberOfItems = 10; - var items = new vis.DataSet(); - - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - items.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - // specify options - var options = { - stack: true, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - orientation: 'top' - }; - - // create a Timeline - var container = document.getElementById('mytimeline'); - timeline1 = new vis.Timeline(container, items, groups, options); - - function handleDragStart(event) { - dragSrcEl = event.target; - - event.dataTransfer.effectAllowed = 'move'; - var itemType = event.target.innerHTML.split('-')[1].trim(); - var item = { - id: new Date(), - type: itemType, - content: event.target.innerHTML.split('-')[0].trim(), - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - }; - - event.dataTransfer.setData("text/plain", JSON.stringify(item)); - } - - var items = document.querySelectorAll('.items .item'); - - for (var i = items.length - 1; i >= 0; i--) { - var item = items[i]; - item.addEventListener('dragstart', handleDragStart.bind(this), false); - } - -</script> - -</body> -</html> |