$(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;
}
});
});
1条答案
按热度按时间8wigbo561#
对于您的问题,我们将允许在删除标签后对其进行编辑。完成后,它应保存回标签。
工作示例:https://jsfiddle.net/Twisty/xxndahs2/6/
JavaScript
字符串
所以你可能希望改变“保存”的发生方式。你可以添加按钮,但我怀疑你正在寻找点击或导航离开类型模型。所以如果用户点击ENTER或TAB或他们点击关闭输入,它将保存当前值。