角度UI日历/完整日历拖动事件无法正常工作（编辑） - 在chrome中

Question

所以我刚刚使用完整日历将Angular UI日历添加到我的应用程序中。我使用Angular UI Calendar站点中的示例代码初始化了它：https://angular-ui.github.io/ui-calendar/

我的问题是我无法拖延＆＃39;事件。拖动开始永远不会发生。点击事件回调有效，＆＃34;可编辑＆＃34;配置选项设置为 <!-- DataTables/JQuery --> <script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.11,af-2.1.1,b-1.1.2,b-colvis-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,r-2.0.2,rr-1.1.1,sc-1.4.1,se-1.1.2/datatables.min.js"></script> <script type="text/javascript" src="plugins/datatables/dataTables.colResize.js"></script> <!-- Bootstrap 3.3.5 --> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <!-- jQuery UI 1.11.4 --> <script type="text/javascript" src="plugins/jQueryUI/jquery-ui.js"></script> <!-- Growl --> <script type="text/javascript" src="plugins/bootstrap-growl-master/jquery.bootstrap-growl.min.js"></script> <!-- Bootstrap Switch --> <script type="text/javascript" src="plugins/bootstrap-switch/bootstrap-switch.js"></script> <!-- Slimscroll --> <script type="text/javascript" src="plugins/slimScroll/jquery.slimscroll.min.js"></script> <!-- FastClick --> <script type="text/javascript" src="plugins/fastclick/fastclick.min.js"></script> <!-- Pace Loading --> <script type="text/javascript" src="plugins/pace/pace.js"></script> <!-- AdminLTE App --> <script type="text/javascript" src="bootstrap/js/app.min.js"></script> <!-- Ion Slider --> <script type="text/javascript" src="plugins/ionslider/ion.rangeSlider.min.js"></script> <!-- ANGULAR JS -- MAKE SURE CDN ANGULAR FILES VERSIONS MATCH --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-resource.js"></script> <!-- Angular-Datatables --> <script type="text/javascript" src="plugins/datatables/angular-datatables.min.js"></script> <!-- Angular-Sortable --> <script type="text/javascript" src="plugins/jQueryUI/sortable.js"></script> <!-- Angular-UI-Bootstrap --> <script type="text/javascript" src="plugins/AngularUI/ui.bootstrap.min.js"></script> <!-- Moment --> <script type="text/javascript" src="plugins/Moment/moment.min.js"></script> <!-- Full Calendar --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.0/fullcalendar.min.js"></script> <!-- Angular-UI-Calendar --> <script type="text/javascript" src="plugins/AngularUI/calendar.js"></script> <script type="text/javascript" src="assets/js/Controllers/calendarController.js"></script> ，我通过文档搜索高低，谷歌和SO没有任何运气。我有以下js文件加载我已确认的正确顺序:(注意* jquery [v.2.2.0]通过首先显示的dataTables CDN打包）

    <section class="content-header">
  <h1>Calendar</h1>
  <ol class="breadcrumb">
    <li><a href="#/"><i class="fa fa-dashboard"></i> Home</a></li>
    <li class="active">Calendar</li>
  </ol>
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Calendar</h3>
                    <div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
                    <h4>{{alertMessage}}</h4>
                    </div>
                </div>
        <div class="box-body">
          <div class="calendar" ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources"></div> 
                </div>
            </div>
        </div>
    </div>
</section>

我的日历显示，事件正在填充，我可以通过成功更改操作模型，但我无法拖动任何事件。更具体地说，我不是要放弃外部事件，只是简单地将现有事件移动到不同的日子。

HTML： * app在父页面上声明这是一个ng-view ///控制器是通过路由提供者声明的。

app.controller('CalendarController', ['$scope', '$window', '$http', 'DTOptionsBuilder', '$log', '$uibModal', 'uiCalendarConfig', '$compile', '$timeout', function($scope, $window, $http, DTOptionsBuilder, $log, $uibModal, uiCalendarConfig, $compile, $timeout) {
  var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.changeTo = 'Hungarian';
    /* event source that pulls from google.com */
    $scope.eventSource = {
            url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
            className: 'gcal-event',           // an option!
            currentTimezone: 'America/Chicago' // an option!
    };
    /* event source that contains custom events on the scope */
    $scope.events = [
      {title: 'All Day Event',start: new Date(y, m, 1)},
      {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
      {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
      {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
    ];
    /* event source that calls a function on every view switch */
    $scope.eventsF = function (start, end, timezone, callback) {
      var s = new Date(start).getTime() / 1000;
      var e = new Date(end).getTime() / 1000;
      var m = new Date(start).getMonth();
      var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
      callback(events);
    };

    $scope.calEventsExt = {
       color: '#f00',
       textColor: 'yellow',
       events: [
          {type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
        ]
    };
    /* alert on eventClick */
    $scope.alertOnEventClick = function( date, jsEvent, view){
        $scope.alertMessage = (date.title + ' was clicked ');
    };
    /* alert on Drop */
     $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
       $scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
    };
    /* alert on Resize */
    $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
       $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
    };
    /* add and removes an event source of choice */
    $scope.addRemoveEventSource = function(sources,source) {
      var canAdd = 0;
      angular.forEach(sources,function(value, key){
        if(sources[key] === source){
          sources.splice(key,1);
          canAdd = 1;
        }
      });
      if(canAdd === 0){
        sources.push(source);
      }
    };
    /* add custom event*/
    $scope.addEvent = function() {
      $scope.events.push({
        title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']
      });
    };
    /* remove event */
    $scope.remove = function(index) {
      $scope.events.splice(index,1);
    };
    /* Change View */
    $scope.changeView = function(view,calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
    };
    /* Change View */
    $scope.renderCalender = function(calendar) {
      $timeout(function() {
        if(uiCalendarConfig.calendars[calendar]){
          uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
      });
    };
     /* Render Tooltip */
    $scope.eventRender = function( event, element, view ) {
        element.attr({'tooltip': event.title,
                      'tooltip-append-to-body': true});
        $compile(element)($scope);
    };
    /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender
      }
    };

    $scope.changeLang = function() {
      if($scope.changeTo === 'Hungarian'){
        $scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
        $scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
        $scope.changeTo= 'English';
      } else {
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        $scope.changeTo = 'Hungarian';
      }
    };
    /* event sources array*/
    $scope.eventSources = [$scope.events, $scope.eventsF];
    $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
}]);

渲染视图=＆gt;提交日历的照片：

非常感谢任何帮助！

编辑：添加了我的控制器*与Angular UI日历站点的示例代码相同

describe-keymap

编辑：我做了一些更广泛的测试，发现只有Chrome浏览器中的拖动失败... Edge，IE，Firefox和Opera按预期工作，仍不确定原因......

Answer 1

我遇到了同样的问题，它与你的电脑触摸屏有关。

转到chrome：// flags并禁用“启用触摸事件”

这对我有把戏

来源：https://github.com/angular-ui/ui-calendar/issues/407