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选项取消对contenteditable的可排序功能。

代码：

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

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

无法使标题可编辑

1 个答案: