You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
4.9 KiB
191 lines
4.9 KiB
<!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" />
|
|
|
|
|
|
|
|
<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;
|
|
}
|
|
li.object-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.object-item:before {
|
|
content: "≣";
|
|
font-family: Arial, sans-serif;
|
|
display: inline-block;
|
|
font-size: inherit;
|
|
cursor: move;
|
|
}
|
|
.items-panel {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
</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 class='items-panel'>
|
|
<div class='side'>
|
|
<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>
|
|
<li draggable="true" class="item">
|
|
item 3 - range - fixed times - <br>
|
|
(start: now, end: now + 10 min)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class='side'>
|
|
<h3>Object with "target:'item'":</h3>
|
|
<li draggable="true" class="object-item">
|
|
object with target:'item'
|
|
</li>
|
|
</div>
|
|
</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',
|
|
onDropObjectOnItem: function(objectData, item, callback) {
|
|
if (!item) { return; }
|
|
alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
|
|
}
|
|
};
|
|
|
|
// create a Timeline
|
|
var container = document.getElementById('mytimeline');
|
|
timeline1 = new vis.Timeline(container, items, groups, options);
|
|
|
|
function handleDragStart(event) {
|
|
var 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()
|
|
};
|
|
|
|
var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
|
|
if (isFixedTimes) {
|
|
item.start = new Date();
|
|
item.end = new Date(1000*60*10 + (new Date()).valueOf());
|
|
}
|
|
event.dataTransfer.setData("text", JSON.stringify(item));
|
|
}
|
|
|
|
function handleObjectItemDragStart(event) {
|
|
var dragSrcEl = event.target;
|
|
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
var objectItem = {
|
|
content: 'objectItemData',
|
|
target: 'item'
|
|
};
|
|
event.dataTransfer.setData("text", JSON.stringify(objectItem));
|
|
}
|
|
|
|
var items = document.querySelectorAll('.items .item');
|
|
|
|
var objectItems = document.querySelectorAll('.object-item');
|
|
|
|
for (var i = items.length - 1; i >= 0; i--) {
|
|
var item = items[i];
|
|
item.addEventListener('dragstart', handleDragStart.bind(this), false);
|
|
}
|
|
|
|
for (var i = objectItems.length - 1; i >= 0; i--) {
|
|
var objectItem = objectItems[i];
|
|
objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|