我在我的 vue.js 项目中实现了 vis.js 时间线，但是我遇到了 drop 的问题。首先，我认为 drop 在该库中不起作用，其次，当我拖动一个项目然后放下它时，如何获取开始和结束时间和日期？
因为 drop 事件不起作用，我正在尝试使用
@items-update="itemsUpdate()"
我正在取回数据。
let properties = this.$refs.timeline.getEventProperties(event)
但我得到了鼠标指针停止的时间。
那么有什么方法可以在我停止拖动项目后获取拖放后的开始时间和结束时间？
因为我需要将该拖动项目的开始时间和结束时间保存到我的数据库中。
谢谢。
我不知道如何直接使用 vue.js 实现，但您已经可以通过在时间轴中向拖动的项目添加“dragend”事件然后在 vue.js 中处理它来从“vis.js”获取这些数据。
这是改编自“ vis.js 示例”网站的工作示例
// 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>