Question

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

放下后，我可以使用全日历“放下”方法处理该事件：

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

或从有角度拖放的'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访问事件的DOM对象。

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

然后，在拖放功能中，可以像这样使用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属性：

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

有了它，甚至不需要“放下”功能... fullcalendar本身就支持拖放。

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

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

AngularJS Fullcalendar拖放-获取放置对象的值

3 个答案: