manager: add handles to drag/drop cells (#10933)

combo/manager/static/js/combo.manager.js

@@ -107,10 +107,14 @@ $(function() {
   });
   init_pages_list();
   $('.cell-list').sortable({
+     handle: '.handle',
      connectWith: '.cell-list',
-     handle: 'h3',
      helper: 'clone',
      placeholder: 'empty-cell',
+     start: function(event, ui) {
+             ui.helper.removeClass('toggled').addClass('untoggled').css('height',
+                             ui.helper.find('h3').outerHeight());
+     },
      update: function(event, ui) {
        var new_order = Object();
        $('.cell').each(function(i, x) {

combo/manager/templates/combo/page_view.html

@@ -79,7 +79,8 @@
     <div class="cell-list">
       {% for cell in placeholder.cells %}
       <div class="cell" data-cell-reference="{{ cell.get_reference }}">
-        <h3>{{ cell.get_label }}
+        <h3><span class="handle">⠿</span>
+                {{ cell.get_label }}
                 {% if cell.slug %} [{{cell.slug}}] {% endif %}
                 <span class="additional-label">
                         <i>{{cell.get_additional_label|default_if_none:""}}</i></span>