如何在单击按钮后基于鼠标单击添加 div

How to add a div based on a mouse click after button click

提问人：unnikrishnan pj 提问时间：11/17/2023 最后编辑：Professor Abronsiusunnikrishnan pj 更新时间：11/17/2023 访问量：83

问：

我制作了一个 HTML 页面，允许您单击按钮进行除法。目前，被添加到 div 中。我想从标准的 div 添加切换到鼠标单击驱动的 div。这意味着当用户一个按钮并选择一个 时，该 div 会附加一个行块。寻找解决方案 add row and columnrow divcontainerclicksdiv

var i = 0;
var j = 0;

let newColNode = null;

function addRow() {
  const row = document.createElement('div');
  row.className = 'bloc';
  row.id = "b" + ++i;

  document.getElementById('contentBox').append(row);

  row.addEventListener('click', function(event) {
    console.log(newColNode)
    console.log(row)
    if (newColNode != null)
      row.appendChild(newColNode);
    newColNode = null
  });
}

// Column Addition

function addCol() {
  const col = document.createElement('div');
  col.className = 'bloc--inner';
  col.id = "c" + ++j;
  newColNode = col;
}
* {
  box-sizing: border-box;
}

.wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

.main-content {
  float: left;
  width: calc(100%);
  height: 100%;
  background: #fafafa;
}

.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content-box {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
}

button {
  background: #000;
  border: 0;
  padding: 0 20px;
  height: 40px;
  margin-left: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.row-block {
  width: 100%;
  border: 2px dashed #848484;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-block:hover {
  border-color: #2654d1;
}

.column-block {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #dedede;
  padding: 20px;
}

.column-block:first-child {
  margin-left: 0;
}

.column-block:last-child {
  margin-right: 0;
}

.row-block .each-draggable-item {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin-bottom: 0;
}

.gu-mirror {
  cursor: grabbing;
}

.container .ex-moved {
  background-color: #e74c3c;
}

.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}

.handle {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
  margin-right: 5px;
  padding: 0 5px;
}

.column-block h5 {
  margin: 0;
}


/* .gu-mirror {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 1;
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.gu-transit {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
} */

.gu-transit {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  transition: .3s ease-out;
}

.container {
  width: 100%;
}

.bloc {
  width: 100%;
  border: 2px dashed #848484;
  background: #ffefef;
  margin-bottom: 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.bloc--inner {
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #d4ecff;
  padding: 20px;
}

.bloc--inner:first-child {
  margin-left: 0;
}

.bloc--inner:last-child {
  margin-right: 0;
}

.bloc--inner .bloc {
  margin: 0;
}
<div class="wrapper">
  <div class="main-content">
    <div class="header">
      <button class="add-row" onclick="addRow()">Add Row +</button>
      <button class="add-column" onclick="addCol()">Add Column +</button>
    </div>
    <div class="content-box" id="main-container">
      <div class="container" id="contentBox">

      </div>
    </div>
  </div>
</div>

提前致谢！！

目前，div 正在应用到容器 div

JavaScript HTML CSS

评论

0赞 Adrid 11/17/2023
我不知道你到底想要什么。什么意思？add column
0赞 unnikrishnan pj 11/17/2023
目前，当我们单击将 div 附加到容器 div 时，现在有一个名为 Add Column 的按钮
0赞 Adrid 11/17/2023
你说“这意味着当用户单击一个按钮并选择一个 div 时，会将一个行块附加到该 div 中。寻找解决方案”。哪里需要？add column
0赞 unnikrishnan pj 11/17/2023
我想更改该附加，在按钮单击后，用户想要通过鼠标单击选择一个 div，添加行 div 必须放在该 div 上
0赞 icecub 11/17/2023
你基本上需要在你的 div 行上有一个 click 事件处理程序，它将向单击的行添加一个像 “active-div” 这样的 CSS 类，并将其从所有其他行中删除。然后只需将按钮附加在 CSS 类之后而不是末尾，您就可以开始了

答：

2赞 Professor Abronsius 11/17/2023 #1

这或多或少是预期的结果吗？单击 a，然后单击任一按钮，将适当的元素添加到先前单击的 ？divdiv

var i = 0;
var j = 0;

let parent=false;

/* delegated listener to set the global variable used to determine where new elements are added */
document.querySelector('#main-container > .container').addEventListener('click',e=>{
  parent=e.target;
});
/* remove elements using right-click */
document.querySelector('#main-container > .container').addEventListener('contextmenu',e=>{
  e.preventDefault();
  try{
    if( parent )parent.removeChild(e.target);
  }catch(err){
    console.clear();
    console.log(err.message);
  }
});





const warnuser=(e)=>{
  if( !parent ){
    return alert('Click a suitable parent to begin');
  }
  return true;
}

function addRow() {
  if( warnuser() ){
    i++;
    const row = document.createElement('div');
          row.className='bloc';
          row.id = `b${i}`;
    parent.append( row );
    return row;}
}
function addCol() {
  if( warnuser() ){
    j++;
    const col=document.createElement('div');
          col.className='bloc--inner';
          col.id = `c${j}`;
    parent.append( col );
    return col;
  }
}
* {
  box-sizing: border-box;
}
/*
  to ensure user can see contentBox initially
*/
.container{
  border:2px dashed grey;
  padding:1rem
}
.bloc:after,
.bloc--inner:after{
  content:attr(id)
}



.wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

.main-content {
  float: left;
  width: calc(100%);
  height: 100%;
  background: #fafafa;
}

.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content-box {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
}

button {
  background: #000;
  border: 0;
  padding: 0 20px;
  height: 40px;
  margin-left: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.row-block {
  width: 100%;
  border: 2px dashed #848484;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-block:hover {
  border-color: #2654d1;
}

.column-block {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #dedede;
  padding: 20px;
}

.column-block:first-child {
  margin-left: 0;
}

.column-block:last-child {
  margin-right: 0;
}

.row-block .each-draggable-item {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin-bottom: 0;
}

.gu-mirror {
  cursor: grabbing;
}

.container .ex-moved {
  background-color: #e74c3c;
}

.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}

.handle {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
  margin-right: 5px;
  padding: 0 5px;
}

.column-block h5 {
  margin: 0;
}


/* .gu-mirror {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 1;
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.gu-transit {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
} */

.gu-transit {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  transition: .3s ease-out;
}

.container {
  width: 100%;
}

.bloc {
  width: 100%;
  border: 2px dashed #848484;
  background: #ffefef;
  margin-bottom: 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.bloc--inner {
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #d4ecff;
  padding: 20px;
}

.bloc--inner:first-child {
  margin-left: 0;
}

.bloc--inner:last-child {
  margin-right: 0;
}

.bloc--inner .bloc {
  margin: 0;
}
<div class="wrapper">
  <div class="main-content">
  
    <div class="header">
      <button class="add-row" onclick="addRow()">Add Row +</button>
      <button class="add-column" onclick="addCol()">Add Column +</button>
    </div>
    
    <div class="content-box" id="main-container">
      <div class="container" id="contentBox"></div>
    </div>
    
  </div>
</div>

也许我有这个倒退 - 重新阅读了这个问题。

如果要使用按钮初始化该过程，以确定当用户在目标区域内单击时要添加的内容，那么也许这比前一个更好，后者似乎与感知的操作模式相反。

var i = 0;
var j = 0;
let bRow=false;
let bCol=false;

let parent=false;
let container=document.querySelector('#main-container > .container');
let header=document.querySelector('.header');


container.addEventListener('click',e=>{
  parent=e.target;
  if(bRow)addRow(e);
  if(bCol)addCol(e);
});

header.addEventListener('click',e=>{
  bRow=false;
  bCol=false;
  
  if( e.target.className=='add-row' )bRow=true;
  if( e.target.className=='add-column' )bCol=true;
});

container.addEventListener('contextmenu',e=>{
  e.preventDefault();
  try{
    if( parent )parent.removeChild( e.target );
  }catch(err){
    console.clear();
    console.log(err.message);
  }
});

function addRow(e) {
  i++;
  const row = document.createElement('div');
        row.className='bloc';
        row.id = `b${i}`;
  parent.append( row );
  bRow=false;
  return row;
}

function addCol(e) {
  j++;
  const col=document.createElement('div');
        col.className='bloc--inner';
        col.id = `c${j}`;
  parent.append( col );
  return col;
}
* {
  box-sizing: border-box;
}
/*
  to ensure user can see contentBox initially
*/
.container{
  border:2px dashed fuchsia;
  background:silver;
  padding:1rem
}
.bloc:after,
.bloc--inner:after{
  content:attr(id)
}



.wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

.main-content {
  float: left;
  width: calc(100%);
  height: 100%;
  background: #fafafa;
}

.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content-box {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
}

button {
  background: #000;
  border: 0;
  padding: 0 20px;
  height: 40px;
  margin-left: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.row-block {
  width: 100%;
  border: 2px dashed #848484;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-block:hover {
  border-color: #2654d1;
}

.column-block {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #dedede;
  padding: 20px;
}

.column-block:first-child {
  margin-left: 0;
}

.column-block:last-child {
  margin-right: 0;
}

.row-block .each-draggable-item {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin-bottom: 0;
}

.gu-mirror {
  cursor: grabbing;
}

.container .ex-moved {
  background-color: #e74c3c;
}

.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}

.handle {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
  margin-right: 5px;
  padding: 0 5px;
}

.column-block h5 {
  margin: 0;
}


/* .gu-mirror {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 1;
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.gu-transit {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
} */

.gu-transit {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  transition: .3s ease-out;
}

.container {
  width: 100%;
}

.bloc {
  width: 100%;
  border: 2px dashed #848484;
  background: #ffefef;
  margin-bottom: 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.bloc--inner {
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #d4ecff;
  padding: 20px;
}

.bloc--inner:first-child {
  margin-left: 0;
}

.bloc--inner:last-child {
  margin-right: 0;
}

.bloc--inner .bloc {
  margin: 0;
}
<div class="wrapper">
  <div class="main-content">
  
    <div class="header">
      <button class="add-row">Add Row +</button>
      <button class="add-column">Add Column +</button>
    </div>
    
    <div class="content-box" id="main-container">
      <div class="container" id="contentBox"></div>
    </div>
    
  </div>
</div>

要限制可以添加到一个行数，可以通过在函数末尾进行设置来实现。进一步的增强功能可能是确保只能在行中添加列 - 在添加列时可能使用属性将是一个合适的解决方案，以便您检查父类是否不包含该类等bRow=falseaddRowclass

可调整行/列和健全性检查的限制，以确保行不会添加到其他行中，并且与列类似。

let bRow = false;
let bCol = false;

window.bLimitRows = true;
window.bLimitCols = false;

let parent = false;
let container = document.querySelector('#main-container > .container');
let checkboxes = document.querySelector('div.chkbx');
let header = document.querySelector('.header');


let togglebttns=(e)=>{
  resetbttns();
  e.target.classList.add('active');
  return true;
};
let resetbttns=()=>{
  header.querySelectorAll('button').forEach(bttn => bttn.classList.remove('active'));
};

container.addEventListener('click',e=>{
  parent = e.target;
  if( bRow ) addRow(e);
  if( bCol ) addCol(e);
});

header.addEventListener('click',e=>{
  bRow = false;
  bCol = false;
  if (e.target.className == 'add-row') bRow = true;
  if (e.target.className == 'add-column') bCol = true;
  return togglebttns(e);
});

checkboxes.addEventListener('click',e=>{
  window[e.target.name] = e.target.checked;
});

container.addEventListener('contextmenu',e=>{
  e.preventDefault();
  try {
    if (parent) parent.removeChild(e.target);
  } catch (err) {
    console.clear();
    console.log(err.message);
  }
});



function addRow(e) {
  if ( e.target.classList.contains('bloc') ) return;
  let row = document.createElement('div');
  row.className = 'bloc';
  row.dataset.label = 'R';
  parent.append(row);
  
  if (bLimitRows) {
    bRow = false;
    resetbttns();
  }
  return row;
}

function addCol(e) {
  if ( e.target.classList.contains('bloc--inner') || e.target == container ) return;
  let col = document.createElement('div');
  col.className = 'bloc--inner';
  col.dataset.label = 'C';
  parent.append(col);
  
  if (bLimitCols) {
    bCol = false;
    resetbttns();
  }
  return col;
}
* {
  box-sizing: border-box;
}

/*
 to ensure user can see contentBox initially
*/
.container {
  border: 2px dashed black;
  background: silver;
  padding: 1rem
}
.bloc:before {
  position: relative;
  content: attr(data-label)counter(row);
  top: calc(50% - 1rem);
  left: -2rem;
  padding: 0.25rem;
  background: yellow;
  border: 2px solid black;
  max-height: 1rem;
}

.bloc--inner:before {
  position: relative;
  content: attr(data-label)counter(col);
  top: -2rem;
  left: calc(50% - 2rem);
  padding: 0.25rem;
  background: lime;
  border: 2px solid black;
  max-height: 1rem;
}
.active {
  background: lime;
  color: black;
}





.wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: row;
  counter-reset: col;
}

.main-content {
  float: left;
  width: calc(100%);
  height: 100%;
  background: #fafafa;
}

.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content-box {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
}

button {
  background: #000;
  border: 0;
  padding: 0 20px;
  height: 40px;
  margin-left: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.row-block {
  width: 100%;
  border: 2px dashed #848484;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-block:hover {
  border-color: #2654d1;
}

.column-block {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #dedede;
  padding: 20px;
}

.column-block:first-child {
  margin-left: 0;
}

.column-block:last-child {
  margin-right: 0;
}

.row-block .each-draggable-item {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin-bottom: 0;
}

.gu-mirror {
  cursor: grabbing;
}

.container .ex-moved {
  background-color: #e74c3c;
}

.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}

.handle {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
  margin-right: 5px;
  padding: 0 5px;
}

.column-block h5 {
  margin: 0;
}

.gu-transit {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  transition: .3s ease-out;
}

.container {
  width: 100%;
}

.bloc {
  width: 100%;
  border: 2px dashed #848484;
  background: #ffefef;
  margin-bottom: 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  counter-increment: row;
}

.bloc--inner {
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #d4ecff;
  padding: 20px;
  counter-increment: col;
}

.bloc--inner:first-child {
  margin-left: 0;
}

.bloc--inner:last-child {
  margin-right: 0;
}

.bloc--inner .bloc {
  margin: 0;
}
<div class='wrapper'>
  <div class='main-content'>
    <div class='chkbx'>
      <label>Limit Rows<input type='checkbox' name='bLimitRows' value=1 checked></label>
      <label>Limit Cols<input type='checkbox' name='bLimitCols' value=1></label>
    </div>
    <div class='header'>
      <button class='add-row'>Add Row +</button>
      <button class='add-column'>Add Column +</button>
    </div>
    <div class='content-box' id='main-container'>
      <div class='container' id='contentBox'></div>
    </div>
  </div>
</div>

评论

0赞 Mister Jojo 11/17/2023
哼。。。我宁愿看到活动行/元素的边框颜色不同......
0赞 unnikrishnan pj 11/17/2023
我将解释实际过程： 1.有2个按钮，一个是添加行，另一个是添加列。2. currnt 代码：单击“添加列”时，一个粉红色的 div 块将附加到容器 3。单击“添加列”按钮并选择任何添加的粉红色行块后，内部将附加一个蓝色的 colur 框，这是实际过程。requiremnt：我希望行块（粉红色框）仅在用鼠标单击任何元素时附加。和 ADD 列与 OER 当前代码相同
0赞 Adrid 11/17/2023
但是，起初没有任何粉红色的盒子。
0赞 unnikrishnan pj 11/17/2023
是的，想要通过添加列按钮添加。目前它正在发生。要求：内容框为空白，然后单击添加按钮 - >鼠标单击任何 div ->然后必须在所选 div 上添加该行（元素单击）
0赞 unnikrishnan pj 11/17/2023
谢谢你的解决。我还需要一个建议，如何将每次点击的行 div 限制为 1，现在它在每次点击时都会不断添加。
1赞 icecub 11/17/2023 #2

基本上，为了获得您想要的内容，我在按钮中添加了一些状态，这些状态将启用/禁用其功能，并且只允许您单击要添加行或列的位置。

var i = 0;
var j = 0;

let addRowBool = false;
let addColBool = false;

function addRowState(){
    if(addColBool){
    addColBool = !addColBool;
  }
    addRowBool = !addRowBool;
  
  setColors();
}

function addColState(){
    if(addRowBool){
    addRowBool = !addRowBool;
  }
    addColBool = !addColBool;
  setColors();
}

function setColors(){
    if(addRowBool) {
    document.querySelector(".add-row").style.backgroundColor = "green";
  } else {
    document.querySelector(".add-row").style.backgroundColor = "red";
  }
  
  if(addColBool) {
    document.querySelector(".add-column").style.backgroundColor = "green";
  } else {
    document.querySelector(".add-column").style.backgroundColor = "red";
  }
}

function addRowOrCol(evt){
    if(addRowBool){
    i++;
    const row = document.createElement('div');
    const txt = document.createTextNode("row"+i);
    row.appendChild(txt);
    row.className = 'bloc';
    row.id = "b" + i;
    
    evt.target.appendChild(row);
  }
  else if(addColBool){
    
    const col = document.createElement('div');
    const txt = document.createTextNode("col"+j);
    col.appendChild(txt);
    col.className = 'bloc--inner';
    col.id = "c" + ++j;

    evt.target.appendChild(col);
  }
}
* {
  box-sizing: border-box;
}

.add-row {
  background-color: red;
}

.add-column {
  background-color: red;
}

.wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

.main-content {
  float: left;
  width: calc(100%);
  height: 100%;
  background: #fafafa;
}

.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content-box {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
}

button {
  background: #000;
  border: 0;
  padding: 0 20px;
  height: 40px;
  margin-left: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.row-block {
  width: 100%;
  border: 2px dashed #848484;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-block:hover {
  border-color: #2654d1;
}

.column-block {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #dedede;
  padding: 20px;
}

.column-block:first-child {
  margin-left: 0;
}

.column-block:last-child {
  margin-right: 0;
}

.row-block .each-draggable-item {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin-bottom: 0;
}

.gu-mirror {
  cursor: grabbing;
}

.container {
  min-height: 50px;
  min-width: 100%;
  background-color: grey;
}

.container .ex-moved {
  background-color: #e74c3c;
}

.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}

.handle {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
  margin-right: 5px;
  padding: 0 5px;
}

.column-block h5 {
  margin: 0;
}


/* .gu-mirror {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 1;
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.gu-transit {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
} */

.gu-transit {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  transition: .3s ease-out;
}

.container {
  width: 100%;
}

.bloc {
  width: 100%;
  border: 2px dashed #848484;
  background: #ffefef;
  margin-bottom: 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.bloc--inner {
  margin: 0 10px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 2px dashed #848484;
  background-color: #d4ecff;
  padding: 20px;
}

.bloc--inner:first-child {
  margin-left: 0;
}

.bloc--inner:last-child {
  margin-right: 0;
}

.bloc--inner .bloc {
  margin: 0;
}
<div class="wrapper">
  <div class="main-content">
    <div class="header">
      <button class="add-row" onclick="addRowState()">Add Row +</button>
      <button class="add-column" onclick="addColState()">Add Column +</button>
    </div>
    <div class="content-box" id="main-container">
      <div class="container" id="contentBox" onclick="addRowOrCol(event)">

      </div>
    </div>
  </div>
</div>

评论

0赞 unnikrishnan pj 11/17/2023
部分正确。此代码允许我同时在单行内添加多行，我们希望每次单击添加列将其限制为 1 行，并且可以将行 div 放在另一行 diiv 之外。列只能添加内行，一列也可以容纳行
0赞 icecub 11/17/2023
@unnikrishnanpj我建议你尝试自己添加它。我已经回答了你的问题，你不能指望我继续开发剧本并提出后续问题。请记住，Stack Overflow 可以帮助您解决遇到的问题。不是为了为你做你的工作。您需要的一切都几乎已经存在。您需要做的就是添加更多布尔值来跟踪添加的行/列，如果为 true，则禁用功能。
0赞 unnikrishnan pj 11/17/2023
对不起，兄弟，我不是那个意思。请建议一种方法将添加行放在另一行之外。现在它第一次放在里面
0赞 icecub 11/17/2023
@unnikrishnanpj 只需增加容器 div 的初始大小即可。我把它做成只有 50 像素高，所以你有一个起点。但是你可以把它放大，它允许你添加多行。
0赞 unnikrishnan pj 11/17/2023
感谢您的宝贵时间。干杯！！

上一个：连接两个 div 的 SVG 贝塞尔路径

下一个：将 fontawesome 添加到 webcomponent 的 shadowroot