Question

我正在构建一个足球编队Web应用程序，该应用程序需要11个div才能可拖动，可拖放和可交换（到目前为止，我已经进行了管理）。我还希望能够单击div并弹出一个允许编辑播放器名称（和备用播放器名称）的弹出窗口。

我正在努力寻找合适的jQuery插件。我找到的最接近的是x可编辑的，但似乎不受支持，并且完全适合旧版本的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();
    }
  })
});

箭头从http://jqueryui.com/tooltip/#custom-style剥离并进行了少许修改。仅在按 Enter 或按下<button>时保存更改。

弹出文字编辑

1 个答案: