在Vue FullCalendar SFC中拖动外部事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Vue FullCalendar SFC中拖动外部事件相关的知识，希望对你有一定的参考价值。
我正在尝试基于vue / laravel SFC中的this codepen工作将日历事件从外部列表拖到我的全日历中。我可以拖动外部事件，但不能将其放在日历中。我在这里应该做些什么？
我没有收到任何控制台错误，而且我正在通过webpack加载jQuery，因此不应有JQuery的多个实例。
我的代码：Home.vue
<template>
<div class="home">
<div class="calendar_wrap">
<full-calendar :config="config" :events="agenda_items" @event-selected="eventClick"/>
</div>
<div class="sidebar">
<div class="sidebar__header">
<button @click="collapse" class="close" aria-label="Close menu" type="button">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66666 4L13.3333 10.6667L6.66666 17.3333" stroke="#B3ECFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<h2>Taken</h2>
<div class="right">
<button class="info">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#B3ECFF"/>
<path d="M7.50839 12.072C7.24439 12.072 7.02439 12 6.84839 11.856C6.68039 11.712 6.59639 11.5 6.59639 11.22V6.84C6.59639 6.56 6.68439 6.348 6.86039 6.204C7.03639 6.06 7.25239 5.988 7.50839 5.988C7.76439 5.988 7.97639 6.06 8.14439 6.204C8.32039 6.348 8.40839 6.56 8.40839 6.84V11.22C8.40839 11.5 8.32039 11.712 8.14439 11.856C7.97639 12 7.76439 12.072 7.50839 12.072ZM7.50839 5.028C7.18839 5.028 6.93639 4.948 6.75239 4.788C6.56839 4.62 6.47639 4.396 6.47639 4.116C6.47639 3.836 6.56839 3.616 6.75239 3.456C6.93639 3.296 7.18839 3.216 7.50839 3.216C7.82039 3.216 8.06839 3.3 8.25239 3.468C8.44439 3.628 8.54039 3.844 8.54039 4.116C8.54039 4.396 8.44839 4.62 8.26439 4.788C8.08039 4.948 7.82839 5.028 7.50839 5.028Z" fill="white"/>
</svg>
</button>
<button class="refresh" @click="refresh">
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.46343 5.65018C2.92992 7.61243 3.43178 9.79171 4.97355 11.3335C7.14754 13.5075 10.6035 13.6156 12.9011 11.6579" stroke="#B3ECFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.43711 7.31577L3.46046 4.94736L1.48975 7.31577" stroke="#B3ECFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.4363 8.39914C14.9698 6.43688 14.4679 4.25761 12.9262 2.71584C10.6384 0.428053 6.93091 0.428053 4.64764 2.71584" stroke="#B3ECFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5424 7.3158L14.519 9.68421L16.4897 7.3158" stroke="#B3ECFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="sidebar__content">
<h2>Taken</h2>
<p>In dit venster vind je het huiswerk dat de docent heeft ingevoerd. Zet de taken op volgorde en plan ze in.</p>
<router-link class="button primary expanded" to="/newitem">Nieuw agenda item</router-link>
<div id="external_events">
<div class="fc-event">
<div class="type">HW</div>
<div class="class">Engels</div>
<div class="date">
<span class="date__day">3</span>
<span class="date__month">mei</span>
</div>
</div>
<div class="fc-event">
<div class="type">HW</div>
<div class="class">Aardrijkskunde</div>
<div class="date">
<span class="date__day">5</span>
<span class="date__month">mei</span>
</div>
</div>
<div class="fc-event">
<div class="type">HW</div>
<div class="class">Engels</div>
<div class="date">
<span class="date__day">3</span>
<span class="date__month">mei</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/locale/nl'
import navHeader from '../components/navHeader.vue'
// import mSidebar from '../components/mSidebar.vue'
import Swal from 'sweetalert2'
export default {
components: {
FullCalendar,
navHeader,
// 'sidebar': mSidebar,
},
data() {
return {
agenda_items: [],
config: {
locale: 'nl',
minTime: "06:00:00",
maxTime: "22:00:00",
editable: true,
dropabble: true,
dragRevertDuration: 0,
nowIndicator: true,
height: 'parent',
allDaySlot: false,
header: {
left: 'menu title',
center: '',
right: 'prev next today month,agendaWeek,agendaDay'
},
customButtons: {
menu: {
text: ' ',
click: function() {
$( ".off-canvas" ).toggleClass("active");
$( "#main" ).toggleClass("active");
}
}
},
views: {
week: {
columnHeaderFormat: "dddd D",
},
month: {
columnHeaderFormat: "dddd",
}
},
eventRender(event, element) {
element.find('.fc-content').append('<i class="delete fas fa-trash-alt"></i> <span class="description">' + event.description + '</span>');
element.find(".delete").click(function() {
Swal.fire({
title: 'Weet je het zeker?',
text: "Je staat op het punt dit item te verwijderen",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ja, verwijderen'
}).then((result) => {
if (result.value) {
$('#calendar').fullCalendar('removeEvents', event._id);
axios.delete('/agenda_items/'+ event.id)
Swal.fire(
'Verwijderd!',
'De afspraak is verwijderd.',
'success'
)
}
})
});
},
drop() {
// remove the element from the "Draggable Events" list
$(this).remove();
},
eventDragStop: function( event, jsEvent, ui, view ) {
var isEventOverDiv = function(x, y) {
var external_events = $( '#external_events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $( "<div class='fc-event'>" ).appendTo( '#external_events_listing' ).text( event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: event.title, id :event.id, stick: true });
}
},
},
}
},
mounted() {
this.get_agenda_items();
this.makeDraggable();
},
methods: {
get_agenda_items() {
window.axios.get('/agenda_items').then(({ data }) => {
// console.log(data);
this.agenda_items = data;
});
},
refresh() {
this.get_agenda_items();
$('.refresh').toggleClass("rotate");
},
makeDraggable() {
// initialize the external events
$('#external_events').sortable()
var elements = $('#external_events .fc-event')
elements.each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
// $(this).draggable({
// zIndex: 999,
// revert: true, // will cause the event to go back to its
// revertDuration: 0 // original position after the drag
// });
});
},
eventClick(item) {
var data = item.id
this.$router.push({ path: '/agendaitem/' + data });
}
},
}
</script>
app.js
/**
* First we will load all of this project's javascript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import jquery from 'jquery'
import 'jquery-ui/ui/widgets/draggable';
import 'jquery-ui/ui/widgets/sortable';
import 'foundation-sites/dist/js/foundation'
require('./bootstrap');
import 'es6-promise/auto'
import axios from 'axios'
import Vue from 'vue'
import VueAuth from '@websanova/vue-auth'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Index from './Index'
import auth from './auth'
import router from './routes'
// Set Vue globally
window.Vue = Vue
// Create eventbus
Vue.prototype.$eventBus = new Vue()
// Set Vue router
Vue.router = router
Vue.use(VueRouter)
// Set Vue authentication
Vue.use(VueAxios, axios)
axios.defaults.baseURL = `${process.env.MIX_APP_URL}/api`
Vue.use(VueAuth, auth)
// Load Index
Vue.component('index', Index)
window.$ = window.jQuery = jquery
/**
* The following block of code will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
const files = require.context('./', true, /.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
router,
el: '#app'
});
答案
替换
dropabble: true
with
droppable
以上是关于在Vue FullCalendar SFC中拖动外部事件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery ui.draggable - 更改当前拖动的对象（在 fullCalendar 中）
如何使用 laravel 在 jquery fullcalendar 中存储拖动的事件
Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable