在drop上获取ui对象中的可拖动对象

时间:2014-09-22 15:35:09

标签: jquery-ui fullcalendar

当使用jQuery-UI的droppable小部件时,drop函数返回一个“ui”对象,您可以在其中访问“draggable”对象,该对象是拖动对象的DOM元素。但是使用fullCalendar的drop函数,我得到了没有“draggable”对象的“ui”对象。这是一个JSFiddle,你可以在其中测试我在说什么:http://jsfiddle.net/vfaethbd/

 $('#calendar').fullCalendar({
      header: {
        left: 'title',
        center: 'agendaDay,agendaWeek,month',
        right: 'today prev,next'
      },
      droppable: true,
      drop: function (date, jsEvent, ui) {
        alert(JSON.stringify(ui, null, 4));
      }
    });

    $("#droppable-area").droppable({
      drop: function (event, ui) {
        alert(JSON.stringify(ui, null, 4));
      }
    });
    /* returns  "draggable": {
            "0": {
                "jQuery111104109880250544967": 6
            },
            "context": {
                "jQuery111104109880250544967": 6
            },
            "length": 1
        }
    */

如果你在日历中删除一个事件,你将没有可拖动的对象,但是如果你把它放在另一个可放置的区域,你就会得到它,因为这个使用了jQuery-UI。

由于

1 个答案:

答案 0 :(得分:1)

实现外部拖动示例在drop回调中的含义:

drop: function(date) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }

完整的代码示例here以及有关外部事件here的文档。

此外,请确保您的活动和日历可编辑,包括以下事件:

  • allDay
  • durationEditable
  • startEditable

如果不是,您的活动似乎丢失了拖动选项