Невозможно сделать заголовок редактируемым

Question

У меня есть рабочий пример кода перетаскивания. Но теперь я хочу сделать заголовок редактируемым. Это не позволяет мне сделать это contenteditable="true" щелкнув левой кнопкой мыши (однако при щелчке правой кнопкой мыши). Эта ошибка возникает, потому что это редактируемое содержимое находится под заголовком. Таким образом, щелчок позволяет пользователю перемещать контент, а не редактировать. Я не могу изменить стиль HTML, это означает, что я не могу помещать это редактируемое содержимое вне заголовка div.

Весь код доступен в JSfille

Demo

HTML

<div class="portlet-header"> 
<span class="red uppercase-text headerEditable" contenteditable="true">Error is here 
</span> 
</div> 

JqueryUI код

$(function() { 
      $(".column").sortable({ 
       connectWith: ".column", 
       handle: ".portlet-header", 
       cancel: ".portlet-toggle", 
       placeholder: "portlet-placeholder ui-corner-all" 
      }); 

      $(".portlet") 
       .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
       .find(".portlet-header") 
        .addClass(" 

    ui-widget-header ui-corner-all") 
        /* .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); */ 

       $(".portlet-toggle").click(function() { 
        var icon = $(this); 
        icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
        icon.closest(".portlet").find(".portlet-content").toggle(); 
       }); 

Answer 1

Вы также должны отменить сортируемую функцию на контентной основе, используя опцию cancel.

Код:

$(".column").sortable({ 
     connectWith: ".column", 
     handle: ".portlet-header", 
     cancel: ".portlet-toggle, .headerEditable", 
     placeholder: "portlet-placeholder ui-corner-all" 
    }); 

Демо: http://jsfiddle.net/IrvinDominin/pf83aLqt/