不能使页眉可编辑

Can't make header editable

本文关键字：编辑 不能      更新时间：2023-09-26

我有一个工作的拖放示例代码。现在我想让header可编辑。它不让我使它的contenteditable="true"鼠标左键点击(但右键点击它。)。发生此错误是因为此可编辑内容位于标题之下。因此，点击它让用户移动内容，而不是编辑。我不能改变HTML样式，这意味着我不能把这个可编辑的内容放在标题div之外。

完整代码可在jsfile

中获得

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

JqueryUI代码/strong> 

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

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

代码:

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

演示:http://jsfiddle.net/IrvinDominin/pf83aLqt/

相关文章：