Fix drag image of dragged section in Safari

Safari apparently get confused with the scaled section thumbnail and
incorrectly uses a much larger rectangle when generating the drag
image of a dragged section item. The image then also includes text of
other chapters and section items of the outline and parts of the
sidebar footer.

Use fallback instead of native draggable for sections in Safari.

Related: SortableJS/Sortable#291

REDMINE-20837

entry_types/scrolled/package/src/editor/views/ChapterItemView.js

@@ -3,6 +3,7 @@ import Marionette from 'backbone.marionette';
 
 import {editor, modelLifecycleTrackingView} from 'pageflow/editor';
 import {cssModulesUtils, SortableCollectionView} from 'pageflow/ui';
+import {browser} from 'pageflow/frontend';
 
 import {SectionItemView} from './SectionItemView';
 
@@ -58,7 +59,8 @@ export const ChapterItemView = Marionette.Layout.extend({
       itemViewOptions: {
         entry: this.options.entry
       },
-      connectWith: cssModulesUtils.selector(styles, 'sections')
+      connectWith: cssModulesUtils.selector(styles, 'sections'),
+      forceDraggableFallback: browser.agent.matchesDesktopSafari()
     }));
 
     this.update();

package/src/ui/views/SortableCollectionView.js

@@ -14,6 +14,9 @@ export const SortableCollectionView = CollectionView.extend({
 
       ghostClass: 'sortable-placeholder',
 
+      forceFallback: this.options.forceDraggableFallback,
+      fallbackTolerance: 3,
+
       onEnd: event => {
         const item = $(event.item);