Javascript Can'；无法使标题可编辑

我有一个可用的拖放示例代码。但现在我想使标题可编辑。它不允许我在鼠标左键单击时将其设置为

contenteditable=“true”

（但在鼠标右键单击时）。发生此错误是因为此可编辑内容位于标题下。所以点击它可以让用户移动内容而不是编辑。我不能更改HTML样式，这意味着我不能将此可编辑内容放在标题div之外

整个代码在JSfille中可用

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();
              });

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”，
句柄：“.portlet头”，
取消：“.portlet切换”，
占位符：“portlet占位符ui角点全部”
});
$（“.portlet”）
.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“
ui小部件标题ui角点全部）
/*.prepend（“”）*/
$（“.portlet切换”）。单击（函数（）{
var icon=$（这个）；
toggleClass（“ui图标+ui图标+图标图标”）；
icon.closest（“.portlet”）.find（“.portlet内容”）.toggle（）；
});

您必须使用选项取消contenteditable上的可排序功能

代码：

---

RajanKumar：乐于助人，如果解决了，就要接受答案。

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