2

我正在使用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>

fullcalendar 设置为：

<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

4

3 回答 3

2

嗯，你想要的东西之一已经在那里了。它date是事件被丢弃的地方。你从drop函数的第一个参数中得到它。它是一个moment对象（根据文档），因此您可能想要使用.toDate()它来获取 JSDate对象。

另一件事是被丢弃的事件的价值。根据同一个文档页面，事件的 DOM 对象可以使用this内部 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
    }
  }
};
于 2018-08-15T17:06:18.470 回答
0

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

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

PLNKR 上的DEMO

于 2018-08-15T19:18:50.287 回答
0

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

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

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

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

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

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

于 2018-08-15T20:06:41.573 回答