Перенос элементов из одного div в другой

Рейтинг: 0Ответов: 1Опубликовано: 09.05.2023

Как сделать так, чтобы при нажатии на кнопку, она переместилась с одного блока div в другой? Если можно, то на чистом JS, без JQuery.

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    margin: 0;
    background: url("../images/background3.jpg") no-repeat;
    font-family: Russo One;
}
h1, h2, h3, h4, h5, h6
{
    margin: 0;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    
    background: url('../images/background3.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'poppins',sans-serif;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    
    background: url('../images/background3.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}
.form-box{
    position: relative;
    width: 600px;
    height: 650px;
    margin: 20px;
    background: transparent;
    border: 2px solid rgba(252, 160, 24, 0.915);
    box-shadow: 0 2px #f2c8c8;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;

}
.form-value
{
    width: 600px;
    min-height: 300px;
    max-height: 650px;
    padding-left: 65px;
    
}

h2{
    margin-top: 40px;
    font-size: 2em;
    color: rgba(252, 160, 24, 0.915);
    text-align: center;
}


button{
    width: 200px;
    height: 50px;
    margin: 15px;
    border-radius: 5px;
    background: rgba(252, 160, 24, 0.915);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style/style2.css">
  <title>test</title>
</head>
<body>
    <section>
        <div class="form-box">
            <div class="form-value">               
                    <button>СТОРОНА A</button>
                    <button>СТОРОНА B</button>
                    <button>СТОРОНА C</button>
                    <button>УГОЛ</button>
                    <button>МЕДИАНА</button>
                    <button>ВЫСОТА</button>
                    <button>БИССЕКТРИСА</button>
                    <button>Катет А</button>
                    <button>Катет Б</button>
                    <button>Гипотенуза</button>
                    <button>Полупериметр</button>
                    <button>Площадь</button>
                    <button>Периметр</button>
                    <button>Средняя линия</button>            
            </div>
        </div>
        <div class="form-box">
            <div class="form-value">
        
            </div>
        </div>
    </section>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Как сделать так, чтобы при нажатии на кнопку, она переместилась с одного блока div в другой?

Например вот так можно "перекидывать" кнопки туда и обратно, просто нажимая на них...

const os = document.querySelector('section')
os.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'BUTTON') return
  const op = o.closest('.form-value')
  os.querySelectorAll('.form-value').forEach(ob => {
    if (ob == op) return
    ob.insertAdjacentElement('beforeend', o)
  })
})
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    margin: 0;
    background: url("../images/background3.jpg") no-repeat;
    font-family: Russo One;
}
h1, h2, h3, h4, h5, h6
{
    margin: 0;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    
    background: url('../images/background3.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'poppins',sans-serif;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    
    background: url('../images/background3.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}
.form-box{
    position: relative;
    width: 600px;
    height: 650px;
    margin: 20px;
    background: transparent;
    border: 2px solid rgba(252, 160, 24, 0.915);
    box-shadow: 0 2px #f2c8c8;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;

}
.form-value
{
    width: 600px;
    min-height: 300px;
    max-height: 650px;
    padding-left: 65px;
    
}

h2{
    margin-top: 40px;
    font-size: 2em;
    color: rgba(252, 160, 24, 0.915);
    text-align: center;
}


button{
    width: 200px;
    height: 50px;
    margin: 15px;
    border-radius: 5px;
    background: rgba(252, 160, 24, 0.915);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style/style2.css">
  <title>test</title>
</head>
<body>
    <section>
        <div class="form-box">
            <div class="form-value">               
                    <button>СТОРОНА A</button>
                    <button>СТОРОНА B</button>
                    <button>СТОРОНА C</button>
                    <button>УГОЛ</button>
                    <button>МЕДИАНА</button>
                    <button>ВЫСОТА</button>
                    <button>БИССЕКТРИСА</button>
                    <button>Катет А</button>
                    <button>Катет Б</button>
                    <button>Гипотенуза</button>
                    <button>Полупериметр</button>
                    <button>Площадь</button>
                    <button>Периметр</button>
                    <button>Средняя линия</button>            
            </div>
        </div>
        <div class="form-box">
            <div class="form-value">
        
            </div>
        </div>
    </section>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>