jQuery-ui拖放。 刪除的列表包含無法編輯的動態創建的文本框

Question

動態創建的文本框在JQuery UI中不可編輯。使用的拖放選項刪除項目時，添加了文本框和項目。 但是“文本”框不可編輯。 文本框在Firefox中不可編輯。 Chrome可以正常運行。 任何想法都會有很大幫助。 請分享不同的方法來滿足所有要求。

jsfiddle.net/dsriniudt/xxndahs2/

Answer 1

我認為這是您正在尋找的東西，將來最好包括一個適當的示例。 請閱讀：

https://stackoverflow.com/help/mcve

對於您的問題，我們將允許刪除標簽后對其進行編輯。 完成后，應將其另存為標簽。

工作示例： https : //jsfiddle.net/Twisty/xxndahs2/6/

JavaScript的

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable, .connectedSortable1"
  }).disableSelection();

  $("#sortable2").droppable({
    cancel: "#addCustomTitle",
    disabled: false,
    drop: function(e, ui) {
      // Use class 'cutomLabel' to identify labels that can be edited
      ui.draggable.addClass("customLabel");
    }
  });

  $("#sortable2").on("click", ".customLabel", function(e) {
    console.log("Click capture, opening Text Box.");
    // Capture current text
    var currentLabel = $(this).text();
    // Replace current HTML with Input field
    $(this).html($("<input>", {
      class: "entryField",
      type: "text",
      value: currentLabel
    }));
    // Set focus inside input field
    $(this).find("input").focus();
    return false;
  });

  $("#sortable2").on("blur keypress click", ".entryField", function(e) {
    console.log(e);
    switch (true) {
      case e.keyCode == $.ui.keyCode.ENTER:
      case e.keyCode == $.ui.keyCode.TAB:
      case e.originalEvent == "blur":
      case e.type == "focusout":
        console.log("Leaving field or Enter was struck, saving value.");
        // Capture value of input field
        var currentValue = $(this).val();
        // Replace HTML with text
        $(this).parent().html(currentValue);
        break;
    }
  });
});

因此，您可能希望更改“保存”的方式。 您可以添加按鈕，但是我懷疑您正在尋找單擊或導航類型模型。 因此，如果用戶單擊ENTER或TAB或單擊輸入，它將保存當前值。