通过拖动jQuery FullCalendar事件删除

我有以下代码：

eventDragStop: function(event, jsEvent, ui, view) {
    calendar.fullCalendar('removeEvents', event.id);
}

但是我被困在那里了。我希望能够将事件拖到类名为“eventdelete”的div上，然后事件被删除

---

我尝试了几种方法来确定事件是否被拖到delete div上，但都没有用。上述解决方案似乎部分奏效。事件触发器正在工作，但会将任何拖动的元素冻结到位。

我使用fullcalendar已经有一段时间了，但如果我记得正确的

ui

允许您访问正在拖动的实际元素，对吗？如果是这种情况，那么您可以获取被拖动元素的坐标和delete div的坐标，并检查它们是否在彼此之间

jQuery通过

.offset（）

授予对相对于页面的坐标的访问权。坐标仅给出

顶部

和

左侧

，但是可以使用元素的高度和宽度计算右侧和底部

（未经测试，但总体思路）

var isElemOverDiv=函数（draggedItem，dropArea）{
//为我们的两个元素准备坐标
var a=$（draggedItem.offset（）；
a、 right=$（draggedItem）.outerWidth（）+a.left；
a、 bottom=$（draggedItem）.outerHeight（）+a.top；
var b=$（dropArea.offset（）；
a、 right=$（dropArea）.outerWidth（）+b.left；
a、 底部=$（dropArea）.outerHeight（）+b.top；
//比较
如果（a.left>=b.left
&&a.top>=b.top
&&a.right我已经更新了外部拖动演示，并将代码发布到了上的评论中。希望能有所帮助

该代码允许将事件从日历中拖出并拖回日历

我正在使用Chrome进行测试。
只需自定义它并将其放入您的js中即可

        $('#calendar').children('.fc-content').children().append('<div id="calendarTrash" style="float: right; padding-top: 5px; padding-right: 5px; padding-left: 5px;"><span class="ui-icon ui-icon-trash"></span></div>');

    //listens for drop event
    $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function(event, ui) { 
            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
                var event = dragged[1];
                var answer = confirm("Delete Event?")
                if (answer)
                {
                    $.ajax({
                        url:'/employees/removeevent?id='+event.id,
                        dataType: 'json',
                        async: false,
                        error: function(xhr, ajaxOptions, thrownError)
                        {
                            //console.log(xhr.status);
                            //console.log(thrownError);
                        },
                        success: function()
                        {
                            calendar.fullCalendar( 'removeEvents' , event.id  );
                        }
                    });
                }
            }
        }
    });

        eventDragStart: function( event, jsEvent, ui, view ) { 
            dragged = [ ui.helper[0], event ];
        },

$（“#日历”）.children（“.fc content”）.children（）.append（“”）；
//侦听丢弃事件
$（“#日历垃圾”）。可拖放({
公差：“指针”，
drop:函数（事件，ui）{
if（拖动的&&ui.helper&&ui.helper[0]==拖动的[0]）{
var事件=拖动[1]；
var应答=确认（“删除事件？”）
若有(答复)
{
$.ajax({
url:'/employees/removeent？id='+event.id，
数据类型：“json”，
async:false，
错误：函数（xhr、ajaxOptions、thrownError）
{
//控制台日志（xhr.status）；
//控制台日志（thrownError）；
},
成功：函数（）
{
calendar.fullCalendar（'removeEvents'，event.id）；
}
});
}
}
}
});
eventDragStart:函数（事件、jsEvent、ui、视图）{
拖动=[ui.helper[0]，事件]；
},
此答案基于T.Stone的答案


所有事件必须具有“id”

var calendar = $('#calendar').fullCalendar({
...
eventDragStop: function(event, jsEvent, ui, view) { 
               //console.log(event.id);
                if (isElemOverDiv(ui, $('div#delete-events'))) {
                    calendar.fullCalendar('removeEvents', event.id);
                }
            }
});


//And an helper function:


var isElemOverDiv = function(draggedItem, dropArea) {
        var dragged = $(draggedItem)[0].offset;

        var b = $(dropArea);
        var limitX = parseInt(b.offset().left) + parseInt(b.outerWidth());
        var limitY = parseInt(b.offset().top) + parseInt(b.outerHeight());

        // Compare
        if ( limitY >=   parseInt(dragged.top) 
            && limitX >=   parseInt(dragged.left) ) 
        { 
            return true; 
        }
        return false;
    }



这对我来说非常有效

非常感谢T.Stone的主旨：）
我告诉你drop:function（事件、ui）
ui:：ui包含一个空对象。在版本2.1之前，jQuery ui对象为：
然后工作（事件：）
序号：

}
好吧，我已经对代码进行了修改，但有些东西卡住了。当一个事件被拖拽时，不管它被扔到哪里，它都会冻结在原地，直到另一个事件被创建为止。斯通我尝试了我能想到的所有ui以及不同的定位算法，但都没有用。在这一点上，任何看似合理的事情都会有所帮助！好的，我会帮助T.Stone的答案变得更清晰。首先，所有事件都必须具有“id”。其次，“isElemOverDiv”函数应该这样编写：var-isElemOverDiv=function（draggedItem，dropArea）{var-draggedItem=$（draggedItem）[0].offset；var-b=$（dropArea）；var-limitX=parseInt（b.offset（）.left）+parseInt（b.outerWidth（））；var-limitY=parseInt（b.offset（）.top）+parseInt（b.outerwight（））//比较（limitY>=parseInt（draugd.top）和&limitX>=parseInt（draugd.left））{return true；}return false；}我一直在处理这个问题，但似乎无法获取我的事件id。在您的示例中，什么是
拖动的
？我如何获取我的事件id？很抱歉，这是很久以前的事了。“draugd”只是一个数组，我用它来存储我想要的拖动事件的不同部分。你可能不需要所有的东西。我想我正在尝试做一些事情来满足我的特定需要。
var calendar = $('#calendar').fullCalendar({
...
eventDragStop: function(event, jsEvent, ui, view) { 
               //console.log(event.id);
                if (isElemOverDiv(ui, $('div#delete-events'))) {
                    calendar.fullCalendar('removeEvents', event.id);
                }
            }
});


//And an helper function:


var isElemOverDiv = function(draggedItem, dropArea) {
        var dragged = $(draggedItem)[0].offset;

        var b = $(dropArea);
        var limitX = parseInt(b.offset().left) + parseInt(b.outerWidth());
        var limitY = parseInt(b.offset().top) + parseInt(b.outerHeight());

        // Compare
        if ( limitY >=   parseInt(dragged.top) 
            && limitX >=   parseInt(dragged.left) ) 
        { 
            return true; 
        }
        return false;
    }

eventDragStop: function(event, jsEvent, ui, view) {

       if (isElemOverDiv(jsEvent, $('div#external-events'))) {

           console.log(isElemOverDiv(jsEvent, $('div#external-events')));
           $('.calendario').fullCalendar('removeEvents', event.id);
       }
   }

  var isElemOverDiv = function(draggedItem, dropArea) {
  var p = dropArea;
  var position = p.position();
  console.log("EL DROP AREA left: " + position.left + ", top: " + position.top);
  console.log('draggedItem.pageY ', draggedItem.clientX, draggedItem.pageY);
  if (draggedItem.clientX >= position.left && draggedItem.pageY >= position.top) {
      return true;
  }
  return false;