Question

我第一次使用jsPlumb并希望得到一些帮助。

我的应用程序允许用户在单击按钮时创建“气球”（div），然后使用jsPlumb将气球中的字符串绘制到“手柄”（另一个div）。

如果删除.show效果，下面的代码可以在我的浏览器（FF）上运行，但是如果我包含{effect: "scale", percent: "100"}，则连接器会被绘制，然后会直接消失。

HTML：

<div id="my_window">
  <div id="my_balloons">
    <div id="my_handle"></div>
  </div>
  <div id="my_buttons">
    <div class="button">Make a balloon</div>
  </div>
</div>

CSS：

#my_balloons {
  height: 400px;
  position: relative;
}

#my_handle {
  background-color: red;
  height: 10px;
  width: 10px;
  position: absolute;
  left: 42%;
  top: 90%;
}

.button {
  background-color: #2460a4;
  border-radius: 0.9em;
  color: #fff;
  cursor: pointer;
  margin: 1em 0;
  padding: 0.3em 1em;
  text-align: center;
  width: 7em;
}

.balloon {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  text-align: center;
  cursor: move;
  width: 100px;
  height: 125px;
}

JS：

jsPlumb.ready(function() {

  jsPlumb.on(document, "click", ".button", function() {

    var balloon = '<div id="my_balloon" class="balloon hide">Balloon!</div>';
    $('#my_balloons').prepend(balloon);
    $('#my_balloons .balloon').show({
      effect: "scale",
      percent: "100"
    });

    jsPlumb.connect({
      source: "myBalloon",
      target: "my_handle",
      anchors: ["BottomCenter", "TopLeft"],
      endpoint: "Dot"
    });


  });

});

Answer 1

您可以使用

添加分部

@RequestMapping(value = "/container", method = RequestMethod.POST)
public void addDomain(@RequestBody Container container)
{
    heavyCode();
    RestTemplate rt = new RestTemplate();
    rt.postForObject("http://134.61.64.201:8080/rest/rawdataservice/container",container, Container.class);
}

}

这里，容器是气球的父画布。然后，您可以使用此输入并将其作为文本添加到句柄div。为了从气球div获得输入，还应包括以下代码

 $("#container").on('click', '.btnClass', function (e) {   
     var balloon = $('<input>').attr('type', 'text');
     balloon_parent.append(balloon);

使用jQuery添加div然后通过jsPlumb连接它

1 个答案: