Fix difficult to edit checklists in Firefox (#9525)

* Change checklist item hover from move to text

* Add vue draggable

* Add vue draggable

* Replace sortablejs directive with Vue Draggable component

* Indent draggable properties

website/client/components/tasks/taskModal.vue

@@ -26,7 +26,11 @@
         .option(v-if="checklistEnabled")
           label(v-once) {{ $t('checklist') }}
           br
-          div(v-sortable='true', @onsort='sortedChecklist')
+          draggable(
+            v-model="checklist",
+            :options="{handle: '.grippy', filter: '.task-dropdown'}",
+            @update="sortedChecklist"
+          )
             .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
               span.grippy
               input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
@@ -466,6 +470,7 @@
       }
 
       &:hover {
+        cursor: text;
         .destroy-icon {
           display: inline-block;
           color: $gray-200;
@@ -518,11 +523,11 @@
 import TagsPopup from './tagsPopup';
 import { mapGetters, mapActions, mapState } from 'client/libs/store';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
-import sortable from 'client/directives/sortable.directive';
 import clone from 'lodash/clone';
 import Datepicker from 'vuejs-datepicker';
 import moment from 'moment';
 import uuid from 'uuid';
+import draggable from 'vuedraggable';
 
 import informationIcon from 'assets/svg/information.svg';
 import difficultyTrivialIcon from 'assets/svg/difficulty-trivial.svg';
@@ -539,9 +544,7 @@ export default {
     TagsPopup,
     Datepicker,
     toggleSwitch,
-  },
-  directives: {
-    sortable,
+    draggable,
   },
   // purpose is either create or edit, task is the task created or edited
   props: ['task', 'purpose', 'challengeId', 'groupId'],