Angularjs fullcalendar拖放 - 获取拖放对象的值答案

【问题标题】：Angularjs fullcalendar drag drop - get value of dropped objectAngularjs fullcalendar拖放 - 获取拖放对象的值
【发布时间】：2018-08-16 04:06:41
【问题描述】：

我正在使用angular-dragdrop 将一个外部对象放入angular-ui-calendar。

外部对象来自此列表：

<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>

当被删除时，我可以使用 fullcalendar '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-model 中定义）和删除日期。

基本上，我想将事件推送到 eventSources：

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

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

【问题讨论】：

标签： angularjs fullcalendar angularjs-3rd-party

【解决方案1】：

嗯，你想要的东西之一已经在那里了。它是date，事件被丢弃。您可以从 drop 函数的第一个参数中得到它。这是一个 moment 对象 (according to the docs)，因此您可能需要使用 .toDate() 来获取 JS Date 对象。

另一件事是被丢弃的事件的价值。根据同一个文档页面，事件的 DOM 对象可以使用 this inside drop 函数访问。

现在，这是一种非常规的方式（我在这里没有看到很多选择），您可以做的是，通过 ng-repeat 迭代事件对象，您可以保留每个对象的属性值，它可以稍后在 drop 函数中访问。例如，看看我如何在这里添加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
    }
  }
};

【讨论】：

谢谢，我更新了我的 plunker 示例。使用 customEventName 属性是一个很好的解决方案。

【解决方案2】：

另一种方法是使用表示范围变量名称的字符串创建属性：

<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
            }); 
        }
    }
};

DEMO on PLNKR

【讨论】：

【解决方案3】：

经过更多研究，我认为 fullcalendar 已经有了解决方案。

我可以在元素中使用 data-event 属性：

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

有了它，甚至不需要“拖放”功能...... fullcalendar 原生支持拖放。

然后我可以选择使用 eventReceive 来处理来自外部资源的删除，并使用 eventDrop 来处理内部事件移动。

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

【讨论】：