我在vue.js项目中实现了vis.js时间轴，但是删除存在问题。首先，我认为该拖放在该库中不起作用，其次，当我拖动一个项然后将其拖放时，如何获取开始和结束时间及日期？
因为drop事件不起作用，所以我尝试使用
@items-update="itemsUpdate()"
，我得到了数据。
let properties = this.$refs.timeline.getEventProperties(event)
但是我得到了鼠标指针停止的时间。
那么我有什么方法可以确定拖放后的开始时间和结束时间？
因为我需要将该拖动项目的开始时间和结束时间保存到数据库中。
谢谢。
答案 0 :(得分：1)
我不知道如何直接用vue.js实现，但是您已经可以通过在时间轴中向拖动的项目添加“拖动”事件然后在vue中对其进行处理，而从“ vis.js”中获取此数据。 js。
以下是从“ vis.js examples”网站改编的工作示例
// 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()
};
// set event.target ID with item ID
event.target.id = new Date(item.id).toISOString();
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));
// Trigger on from the new item dragged when this item drag is finish
event.target.addEventListener('dragend', handleDragEnd.bind(this), false);
}
function handleDragEnd(event) {
// Last item that just been dragged, its ID is the same of event.target
var newItem_dropped = timeline1.itemsData.get(event.target.id);
var html = "<b>id: </b>" + newItem_dropped.id + "<br>";
html += "<b>content: </b>" + newItem_dropped.content + "<br>";
html += "<b>start: </b>" + newItem_dropped.start + "<br>";
html += "<b>end: </b>" + newItem_dropped.end + "<br>";
document.getElementById('output').innerHTML = html;
}
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);
} 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;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline | Drag & Drop</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</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' style="max-width:350px;overflow:auto">
<h3>Last item just been dragged on timeline:</h3>
<pre id="output"></pre>
</div>
<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>
</body>
</html>