Перетаскивание Angularjs fullcalendar - получить значение отброшенного объекта

Я сбрасываю внешний объект в https://github.com/angular-ui/ui-calendar с помощью angular-dragdrop.

Внешний объект приходит из этого списка:

<div class="fc-event" data-drag="true"
     jqyoui-draggable="{animate:true}"
     ng-model="test_object"
     ng-repeat="test_object in test_objects">
  Draggable - {{ test_object.name }} 
</div>

Полный календарь настроен с:

<div id="ApptsCalendar" calendar="ApptsCalendar"
     ui-calendar="calendarOptions.calendar"
     ng-model="eventSources" data-drop="true"
     jqyoui-droppable="{multiple:true, onDrop: 'drop_function'}"
     data-jqyoui-options>
</div>

После удаления я могу обработать это событие, используя метод dropcalendar 'drop':

$scope.calendarOptions = {
    calendar: {
        editable: true,
        droppable: true,
        drop: function(date,jsEvent,ui,resourceId){
            console.log("Dropped from calendarOptions")
            console.log(resourceId);
            $scope.eventSources[0].push({
                id:5,
                title: 'dropped event (fake)',
                start:  date
            });     
        }
    }
};

или из обратного вызова angular-dragdrop onDrop для вызова функции drop:

jqyoui-droppable="{multiple:true, onDrop: 'drop'}"

Оба могут сработать, когда я захочу, но ни у одного из них нет двух нужных мне частей. Мне нужно, чтобы значение объекта было сброшено (определено в ng-модели) и дата была сброшена.

По сути, я хочу отправить событие в источник событий с помощью:

$scope.eventSources[0].push({
    id:5,
    title: '...name of object...',
    start:  '...date of target dropped on...'
});

http://plnkr.co/edit/fj858Htb2FRUg5h1pucP?p=preview

Источник

3 ответа

Решение

Ну, одна из вещей, которые вы хотели, уже есть. Это date на котором событие сброшено. Вы получаете это из первого аргумента drop функция. Это moment объект (в соответствии с документами), так что вы можете использовать .toDate() для того, чтобы получить JS Date объект.

Другая вещь - ценность события, которое упало. Согласно той же самой странице документов, объект DOM события доступен с помощью this функция внутренней капли.

Теперь, это немного нетрадиционный способ (я не вижу много вариантов здесь), что вы можете сделать, с ng-repeat перебирая объекты событий, вы можете сохранять атрибуты со значениями для каждого объекта, к которым впоследствии можно будет получить доступ внутри функции удаления. Например, посмотрите, как я добавил customEventName="{{test_object.name}}" здесь:

<div class="fc-event tech_draggable" data-drag="true" id="{{test_object.name}}" 
     customEventName="{{test_object.name}}" jqyoui-draggable="{animate:true}" 
     ng-model="test_object" ng-repeat="test_object in test_objects" ...>
    Draggable - {{ test_object.name }}
</div>

Затем в функции drop, к которой можно получить доступ, используя this.getAttribute('customEventName') как это:

$scope.calendarOptions = {
  calendar: {
    editable: true,
    droppable: true,
    drop: function(momentDate, jsEvent, ui, resourceId) {
      console.log(momentDate.toDate()) // gives JS Date object
      console.log(this.getAttribute('customEventName')); // gives event2/event3 etc.
      //... more
    }
  }
};
Источник

Альтернативой является создание атрибута со строкой, представляющей имя переменной области:

<div ng-repeat="test_object in test_objects">
  <div class="fc-event tech_draggable" 
       data-drag="true" 
       jqyoui-draggable="{animate:true}" 
       ng-repeat="test_object in test_objects" 
       style="margin-bottom:1px;" 
       data-jqyoui-options="{helper: 'clone'}"
       scope-data-name="test_objects[{{$index}}]"
   >
    Draggable - {{ test_object.name }}
  </div>
</div>

И используя $scope.$ Eval, чтобы получить реальный объект:

$scope.calendarOptions = {
    calendar: {
        editable: true,
        droppable: true,
        drop: function(date,jsEvent,ui,resourceId){
            var scopeDataName = this.getAttribute('scope-data-name');
            var data = $scope.$eval(scopeDataName);
            $scope.eventSources[1].push({ 
                id: $scope.eventSources[0].length, 
                title: `${data.name} ${data.description}`,
                start: date
            }); 
        }
    }
};

ДЕМО на ПЛНКР

Источник

После некоторых исследований, я думаю, что у fullcalendar уже есть решение.

Я могу использовать атрибут data-event в элементе:

data-event='{"title":"{{ test_object.name }}"}'

При этом нет необходимости даже иметь функцию "перетаскивания"... fullcalendar изначально поддерживает перетаскивание.

Затем я могу по желанию использовать eventReceive для обработки удаления из внешнего ресурса и использовать eventDrop для обработки внутреннего перемещения события.

http://plnkr.co/edit/fj858Htb2FRUg5h1pucP?p=preview

Источник
Другие вопросы по тегам