弹出文本编辑

Question

我正在构建一个足球编队网络应用程序，它需要 11 个 divs 才能可拖动、可放置和可交换（到目前为止我已经做到了这一点）。我还希望能够单击 div 并弹出一个允许编辑玩家名称（和备用玩家名称）的弹出窗口。

我正在努力寻找合适的 jQuery 插件。我发现最接近的是 x-editable 但它似乎不受支持并且非常适合旧版本的 bootstrap.

有什么建议吗？

Answer 1

这是一个几乎没有解释的例子。将来，请确保提供更完整的当前代码示例。还要确保您描述了您尝试过的内容。

这在很大程度上完成了您正在讨论的内容。我会考虑查看 Dialog，但这有点定制化。

示例：https://jsfiddle.net/Twisty/u9xckmq6/

JavaScript

$(function() {
  var box = $(".pitch");
  var mainCanvas = $(".main-canvas");

  function hidePopUp(event) {
    $t = $(event.target);
    if ($t.parents("div").attr("class") !== "pop-up") {
      return !$(event.target).closest(".pitch").length;
    } else {
      return false;
    }
  }

  box.draggable({
    containment: mainCanvas,
    helper: "clone",
    start: function() {
      $(this).css({
        opacity: 0
      });
      $(".pitch").css("z-index", "0");
    },
    stop: function() {
      $(this).css({
        opacity: 1
      });
    }
  });

  box.droppable({
    accept: box,
    drop: function(event, ui) {
      var draggable = ui.draggable;
      var droppable = $(this);
      var dragPos = draggable.position();
      var dropPos = droppable.position();
      draggable.css({
        left: dropPos.left + "px",
        top: dropPos.top + "px",
        "z-index": 20
      });
      droppable.css("z-index", 10).animate({
        left: dragPos.left,
        top: dragPos.top
      });
    }
  });

  box.click(function(e) {
    var $self = $(this);
    var pslot = $self.data("player");
    var pname = $self.text().trim();
    $(".pop-up").data("player", pslot);
    $(".pop-up input").val(pname);
    $(".pop-up").position({
      my: "center top+10",
      at: "center bottom",
      of: $self,
      using: function(position, feedback) {
        $(this).css(position);
        $(".arrow").remove();
        $("<div>")
          .addClass("arrow")
          .addClass((feedback.vertical == "top" ? "bottom" : "top"))
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }).data("visible", true).show();
  });

  $(".pop-up button").button({
    icon: "ui-icon-check",
    showLabel: false
  });

  $(".pop-up form").submit(function(e) {
    e.preventDefault();
    var pname = $("input", this).val();
    var pslot = $(this).parent().data("player");
    console.log("Saving", pname, pslot);
    $(".player" + pslot).html(pname);
    $(".pop-up").hide();
  });

  $(document).click(function(e) {
    if (hidePopUp(e)) {
      $(".pop-up").hide();
    }
  })
});

Arrow 从 http://jqueryui.com/tooltip/#custom-style 中剥离并稍作修改。只有在按下 Enter 或 <button> 时才会保存更改。

弹出文本编辑

Pop up text edit

jquery

jquery-ui

popup