无法使标题可编辑

Question

I have a working Drag and Drop sample code. But now I want to make header editable. It doesn't let me to make it contenteditable="true" on left click of mouse (however on right click it does.). This error occurs because this edit-able-content is under the header. So on click it lets user to move the content not edit. I can not change the HTML style, means I cant put this edit-able-content outside the header div.

Whole code is available in JSfille

Demo

HTML

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

JqueryUI code

$(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

You have to cancel the sortable feature on the contenteditable too using cancel option.

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/pf83aLqt/