我将如何在按下加号按钮时显示的 html 网站上创建可编辑的 "blocks"？

Question

我对 html/css/javascript 非常陌生，我什至不知道我是否使用了正确的工具来制作它。

我正在尝试创建一个带有加号图标的网站，按下该图标会在页面上创建一个面板和“sprite”。该面板具有更改 sprite 的各种属性的控件，并且可以被删除，这也会删除 sprite。按加号图标可以创建多个面板，每个面板都有一个单独的精灵。

我特意询问有关面板创建的问题。一个按钮可以创建许多面板，每个面板都是独一无二的并由用户控制，这样的事情甚至可能吗？还是我最好使用另一种语言？

这里是 html 按钮代码，如果有的话：

<div class="createBlock">
     <button onclick="createBlock()" class="buttonMain menuPlus">+</button>
</div>

非常感谢！

Answer 1

你可以用 jQuery 做到这一点。您的 createBlock 函数可能如下所示：

/* create a counter to keep track of the blocks */
let counter = 0;

/* this function will fire when the button is clicked */
function createBlock() {

  /* increase the counter by 1 */
  counter++;

  /* clear all blocks after limit and reset counter */
  if (counter > 20) {
    $(".block-container").find("[class*=block-el]").remove();
    counter = 0;
  }

  /* create new block element */
  let block = $("<div />", {
    "class": "block-el-" + counter
  }).append(

    /* append child elements to block */
    $("<div />", {
      "class": "block-content"
    }).text("Content"),
    $("<div />", {
      "class": "block-close"
    }).text("close")

  ).appendTo(
    ".block-container" /* append block to dom */
  ).css({
    /* set dynamic styles on block element */
    "z-index": counter,
    "left": Math.floor(Math.random() * 101) + "%",
    "top": Math.floor(Math.random() * 101) + "%"
  });

}

/* remove the block when close button clocked. this is important, the selector cant be a dynamic object or it wont work */

$("body").on("click", ".block-close", function() {
  /*find the parent block */
  $(this).closest("[class*=block-el]").fadeOut("fast", function() {
    /* after element fades out remove it */
    $(this).remove();
    /* subtract 1 from the blocks counter */
    counter--;
  });
})

/* Styling added just for example */

body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.block-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: dodgerblue;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.createBlock>button {
  border: none;
  outline: none;
  -webkit-appearance: none;
  background: aquamarine;
  color: #fff;
  padding: 12px;
  border-radius: 4px;
  z-index: 9000;
  position: relative;
  width: 140px;
}

[class*="block-el"] {
  display: grid;
  grid-template-rows: 60% 1fr;
  grid-gap: 20px;
  background: white;
  padding: 15px;
  border-radius: 6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .1));
  width: 140px;
  height: 140px;
  max-width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.block-content {
  background: slategrey;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.block-close {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: black;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-container">
  <div class="createBlock">
    <button onclick="createBlock()" class="buttonMain menuPlus">+</button>
  </div>
</div>

我将如何在按下加号按钮时显示的 html 网站上创建可编辑的 "blocks"？

How would I go about creating editable "blocks" on an html website that show up when a plus button gets pressed?

javascript

user-controls