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

Question

我正在将一个外部对象放入 angular-ui-calendar using 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>

删除后，我可以使用 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-拖放 '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

Answer 1

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

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

现在，这是一种非常规的方式（我在这里没有看到很多选择），您可以做的是，通过 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
    }
  }
};

Answer 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

Answer 3

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

我可以在元素中使用数据事件属性：

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

有了它，甚至不需要 'drop' 功能...fullcalendar 本机支持拖放。

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

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

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

Angularjs fullcalendar drag drop - get value of dropped object

fullcalendar

angularjs

angularjs-3rd-party