Javascript 无法在jquery完整日历（asp.net mvc5应用程序）上设置可拖动div的文本
我将按照本文创建可拖动项，并将其放到jquery完整日历中。 我原来有一个可拖动的div，它的文本是“selecttocreatecall” 我必须通过在两个下拉列表中选择用户选择的内容，然后从中生成一个标题来定制它以创建标题。 它肯定会在div上显示标题，但当我拖放它时，它会显示原始文本，即Select to Create Call 我假设原因是它在jquery完整日历上删除了一个克隆。 请查看以下代码：Javascript 无法在jquery完整日历（asp.net mvc5应用程序）上设置可拖动div的文本,javascript,jquery,asp.net-mvc,fullcalendar,Javascript,Jquery,Asp.net Mvc,Fullcalendar,我将按照本文创建可拖动项，并将其放到jquery完整日历中。 我原来有一个可拖动的div，它的文本是“selecttocreatecall” 我必须通过在两个下拉列表中选择用户选择的内容，然后从中生成一个标题来定制它以创建标题。 它肯定会在div上显示标题，但当我拖放它时，它会显示原始文本，即Select to Create Call 我假设原因是它在jquery完整日历上删除了一个克隆。 请查看以下代码： <script type='text/javascript'>
<script type='text/javascript'>
$(document).ready(function () {
var calendar = $('#calendar');
// eventSources: [getCalData()],
$('#calendar').fullCalendar({
// calendar.fullCalendar({
header: {
left: 'prev,next ',
center: 'title',
right: 'month'
}, editable: true, droppable: true,
// eventSources: [
// {
events: function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("GetEvents", "Calendar")',
// dataType: 'json',
data: {
month: $("#calendar").fullCalendar('getDate').month(),
year: $("#calendar").fullCalendar('getDate').year()
},
success: function (doc) {
var events = [];
$.each(doc, function (index, event) {
$('#calendar').fullCalendar('renderEvent', event);
});
}
});
},
eventDrop: function (event, delta, revertFunc) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event)
}
});
},
drop: function(event,allDay) {
//drop functionality goes here
/* var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = event.date;
copiedEventObject.allDay = allDay;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);*/
$.ajax({
url: '@Url.Action("AddEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event),
//datePicked: date,
title: $('#total-title').text(),
ddlAttending: $('#ddlAttending').val(),
ddlCallType: $('#ddlCallType').val()
},
/* success: function (data) {
$('#external-events .fc-event').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
});
});
}*/
});
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
}
});
function saveEvent(event, dayDelta) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
id: event.id,
daysMoved: dayDelta
},
type: "POST"
});
}
$('.fc-next-button').click(function () {
var date = $("#calendar").fullCalendar('getDate');
//alert('next is clicked, do something');
events: '@Url.Action("GetEvents", "Calendar")'
});
$('.fc-prev-button').click(function () {
//alert('prev is clicked, do something');
events:'@Url.Action("GetEvents", "Calendar")'
});
$.ajax({
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#external-events .fc-event').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
});
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
alert(textStatus);
}
});
});
function createNewEvent()
{
// $("#drop2").val( $("#drop").val() + ' ' + $("#drop1").val());
$('#total-title').text($("#ddlAttending :selected").text() + ' ' + $("#ddlCallType :selected").text());
//alert($('#total-title').text())
// $('#total-title').text($("#drop2").val());
}
</script>
$（文档）.ready（函数（）{
var calendar=$（“#calendar”）；
//eventSources:[getCalData（）]，
$（“#日历”）.fullCalendar({
//日历({
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“月”
}，可编辑：true，可拖放：true，
//事件来源：[
// {
事件：函数（开始、结束、时区、回调）{
$.ajax({
url:'@url.Action（“GetEvents”，“Calendar”）'，
//数据类型：“json”，
数据：{
月份：$（“#日历”）.fullCalendar（'getDate'）.month（），
年份：$（“#日历”）.fullCalendar（'getDate'）.year（）
},
成功：功能（doc）{
var事件=[]；
$。每个（文档、函数（索引、事件）{
$（“#日历”）.fullCalendar（'renderEvent'，event）；
});
}
});
},
eventDrop:函数（事件、增量、恢复函数）{
$.ajax({
url:'@url.Action（“ChangeEvents”，“Calendar”）'，
数据：{
eventsJson:JSON.stringify（事件）
}
});
},
下降：功能（事件，全天）{
//这里有投递功能
/*var originalEventObject=$（this.data（'eventObject'）；
var copiedEventObject=$.extend（{}，originalEventObject）；
copiedEventObject.start=event.date；
copiedEventObject.allDay=全天；
$（“#calendar”）.fullCalendar（'renderEvent'，copiedEventObject，true）*/
$.ajax({
url:'@url.Action（“AddEvents”，“Calendar”）'，
数据：{
eventsJson:JSON.stringify（事件），
//日期：日期，
标题：$（“#总标题”）.text（），
ddldAttenting:$（'#ddldAttenting'）.val（），
ddlCallType:$（'#ddlCallType'）.val（）
},
/*成功：功能（数据）{
$（'#external events.fc event'）。每个（函数（）{
//存储数据，以便日历知道在删除时呈现事件
$（此）.data（'事件'{
title:$.trim（$（this）.text（）），//使用元素的文本作为事件标题
stick:true//在用户导航时进行维护（请参阅renderEvent方法中的文档）
});
//使用jQuery UI使事件可拖动
$（此）。可拖动({
zIndex:999，
revert:true，//将导致事件返回其初始状态
revertDuration:0//拖动后的原始位置
});
});
}*/
});
如果（$（'#drop remove'）。是（':checked'））{
$（this.remove（）；
}
}
});
函数saveEvent（event，dayDelta）{
$.ajax({
url:'@url.Action（“ChangeEvents”，“Calendar”）'，
数据：{
id:event.id，
daysMoved:Daysdelta
},
类型：“职位”
});
}
$（'.fc下一步按钮'）。单击（函数（）{
变量日期=$（“#日历”）.fullCalendar（'getDate'）；
//警报（“单击下一步，执行操作”）；
事件：'@Url.Action（“GetEvents”、“Calendar”）'
});
$（'.fc prev按钮'）。单击（函数（）{
//警报（“单击上一步，执行操作”）；
事件：'@Url.Action（“GetEvents”、“Calendar”）'
});
$.ajax({
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
$（'#external events.fc event'）。每个（函数（）{
//存储数据，以便日历知道在删除时呈现事件
$（此）.data（'事件'{
title:$.trim（$（this）.text（）），//使用元素的文本作为事件标题
stick:true//在用户导航时进行维护（请参阅renderEvent方法中的文档）
});
//使用jQuery UI使事件可拖动
$（此）。可拖动({
zIndex:999，
revert:true，//将导致事件返回其初始状态
revertDuration:0//拖动后的原始位置
});
});
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
调试器；
警报（文本状态）；
}
});
});
函数createNewEvent（）
{
//$（“#drop2”）.val（$（“#drop”）.val（）+''++$（“#drop1”）.val（））；
$（“#总标题”）.text（$（“#总标题：选定”）.text（）
<div>
<div id="calendar" style="width:85%"></div>
<div id='external-events' style="width:15%;margin-top:40px;margin-left:13px">
<h4>
Create Draggable Events
</h4>
@Html.DropDownList("ddlAttending", (SelectList)ViewBag.PersonelID, "-Select Attending-", new { @style = "margin:5px;" })
@Html.DropDownList("ddlCallType", (SelectList)ViewBag.OnCallType, "-Select CallType-", new { @style = "margin:5px;", onchange = "createNewEvent();" })
<span class='fc-event' contenteditable="true" id="total-title" style="width: 155px; margin: 5px;">Select to create call</span>
</div>
</div>
$('#external-events .fc-event').each(function ()
{ $(this).data('event',
{ title: $('#total-title').text(), // use the element's text as the title
stick: true // maintain when user navigates
});
});
$(document).ready(function () {
var calendar = $('#calendar');
// eventSources: [getCalData()],
$('#calendar').fullCalendar({
// calendar.fullCalendar({
header: {
left: 'prev,next ',
center: 'title',
right: 'month'
}, editable: true, droppable: true,
// eventSources: [
// {
events: function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("GetEvents", "Calendar")',
// dataType: 'json',
data: {
month: $("#calendar").fullCalendar('getDate').month(),
year: $("#calendar").fullCalendar('getDate').year()
},
success: function (doc) {
var events = [];
$.each(doc, function (index, event) {
$('#calendar').fullCalendar('renderEvent', event);
});
}
});
},
eventDrop: function (event, delta, revertFunc) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event)
}
});
},
drop: function (event, allDay) {
alert($('#total-title').text());
//drop functionality goes here
$('#external-events .fc-event').each(function () {
$(this).data('event', {
title: $('#total-title').text(), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
});
$.ajax({
url: '@Url.Action("AddEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event),
//datePicked: date,
title: $('#total-title').text(),
ddlAttending: $('#ddlAttending').val(),
ddlCallType: $('#ddlCallType').val()
},
/*success: function (data) {
callback(data);
// $('#calendar').fullCalendar('refetchEvents');
alert(data.title);
$('#calendar').fullCalendar('renderEvent', event, true);
$('#external-events .fc-event').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
});
});
}*/
});
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
}
});
function saveEvent(event, dayDelta) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
id: event.id,
daysMoved: dayDelta
},
type: "POST"
});
}
$('.fc-next-button').click(function () {
var date = $("#calendar").fullCalendar('getDate');
//alert('next is clicked, do something');
events: '@Url.Action("GetEvents", "Calendar")'
});
$('.fc-prev-button').click(function () {
//alert('prev is clicked, do something');
events:'@Url.Action("GetEvents", "Calendar")'
});
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
/* $(this).data('event', {
title: $(this).find("p").html($("#ddlAttending :selected").text() + ' ' + $("#ddlCallType :selected").text()),//$.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
});
});
});
function createNewEvent()
{
// $("#drop2").val( $("#drop").val() + ' ' + $("#drop1").val());
$('#total-title').text($("#ddlAttending :selected").text() + ' ' + $("#ddlCallType :selected").text());
//alert($('#total-title').text())
// $('#total-title').text($("#drop2").val());
}
</script>
<div>
<div id="calendar" style="width:85%"></div>
<div id='external-events' style="width:15%;margin-top:40px;margin-left:13px">
<h4>
Create Draggable Events
</h4>
@Html.DropDownList("ddlAttending", (SelectList)ViewBag.PersonelID, "-Select Attending-", new { @style = "margin:5px;" })
@Html.DropDownList("ddlCallType", (SelectList)ViewBag.OnCallType, "-Select CallType-", new { @style = "margin:5px;", onchange = "createNewEvent();" })
<div class='fc-event' contenteditable="true" id="total-title" style="width: 155px; margin: 5px;" data-title="ok"><p>Select to create call</p></div>
</div>
</div>