Проблема при перетаскивании элементов при использовании Dragula - PullRequest
Новая
       20

Проблема при перетаскивании элементов при использовании Dragula

0 голосов
/ 03 июня 2019

Я все еще работаю над школьным проектом в ближайшее время, и я заставил вещи работать с момента моего последнего вопроса. Я пошел в библиотеку Драгула, и это работало нормально. Если вы протестируете мой код, вы увидите, что при перетаскивании шестиугольника вокруг кнопок chils текстовое поле выходит за пределы шестиугольника при перетаскивании и снова попадает в правильное положение, когда я опускаю шестиугольник. Как избежать выпадения элементов из шестиугольника при их перетаскивании?

Вот ссылка на gitHub, который вы можете клонировать и протестировать:

https://github.com/Martinius222/ProsjektMaster

это постоянный проект, поэтому в нем разные файлы, но соответствующие файлы - index.html style.css dragula.js (библиотека) для тестирования.

Я безуспешно пытался поиграть с HTML и CSS шестиугольников и дочерних кнопок. Я подозреваю, что есть проблема с JavaScript.

Там много кода, но я разместил ссылку на gitHub для всего проекта. Ниже приведены HTML и CSS: 


<!DOCTYPE html>
<html>
<head>
    <title>IdeaComb</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="dragula.css">

</head>
<body>
<script type="text/javascript" src="dragula.js"></script>

    <nav></nav>
    <div id="sidebar">

        <div id="options"></div>
        <div id="listField"></div>
        <div id="generator">
            <div id="generatorOptions">
                <button id="newCombBtn">+</button>
            </div>
            <div id="generatorField">

            </div>



        </div>

    </div>

    <div id="workspace">

        <div class="rows" id="row1">

            <div id="1x1" class="cont"></div>
            <div id="1x2" class="cont"></div>
            <div id="1x3" class="cont"></div>
            <div id="1x4" class="cont"></div>
            <div id="1x5" class="cont"></div>
            <div id="1x6" class="cont"></div>
            <div id="1x7" class="cont"></div>
            <div id="1x8" class="cont"></div>

        </div>

        <div class="rows" id="row2">

            <div id="2x1" class="cont"></div>
            <div id="2x2" class="cont"></div>
            <div id="2x3" class="cont"></div>
            <div id="2x4" class="cont"></div>
            <div id="2x5" class="cont"></div>
            <div id="2x6" class="cont"></div>
            <div id="2x7" class="cont"></div>
            <div id="2x8" class="cont"></div>

        </div>

        <div class="rows" id="row3">

            <div id="3x1" class="cont"></div>
            <div id="3x2" class="cont"></div>
            <div id="3x3" class="cont">
                <div class="hexagon">
                    <div id="likebtn">+</div>
                    <div id="deletebtn">x</div>
                    <input type="" name="" placeholder="Test">
                </div>
            </div>
            <div id="3x4" class="cont"></div>
            <div id="3x5" class="cont"></div>
            <div id="3x6" class="cont"></div>
            <div id="3x7" class="cont"></div>
            <div id="3x8" class="cont"></div>

        </div>  

        <div class="rows" id="row4">

            <div id="4x1" class="cont"></div>
            <div id="4x2" class="cont"></div>
            <div id="4x3" class="cont"></div>
            <div id="4x4" class="cont"></div>
            <div id="4x5" class="cont"></div>
            <div id="4x6" class="cont"></div>
            <div id="4x7" class="cont"></div>
            <div id="4x8" class="cont"></div>

        </div>

        <div class="rows" id="row5">

            <div id="5x1" class="cont"></div>
            <div id="5x2" class="cont"></div>
            <div id="5x3" class="cont"></div>
            <div id="5x4" class="cont"></div>
            <div id="5x5" class="cont"></div>
            <div id="5x6" class="cont"></div>
            <div id="5x7" class="cont"></div>
            <div id="5x8" class="cont"></div>

        </div>

        <div class="rows" id="row6">

            <div id="6x1" class="cont"></div>
            <div id="6x2" class="cont"></div>
            <div id="6x3" class="cont"></div>
            <div id="6x4" class="cont"></div>
            <div id="6x5" class="cont"></div>
            <div id="6x6" class="cont"></div>
            <div id="6x7" class="cont"></div>
            <div id="6x8" class="cont"></div>

        </div>

    </div>

<script type="text/javascript" src="script.js"></script>

<script>
dragula([document.getElementById("generatorField"), document.getElementById("1x1"), document.getElementById("1x2"), document.getElementById("1x3"), document.getElementById("1x4"), document.getElementById("1x5"),document.getElementById("1x6"), document.getElementById("1x7"), document.getElementById("1x8"), document.getElementById("2x1"), document.getElementById("2x2"), document.getElementById("2x3"), document.getElementById("2x4"), document.getElementById("2x5"), document.getElementById("2x6"), document.getElementById("2x7"), document.getElementById("2x8"), document.getElementById("3x1"), document.getElementById("3x2"), document.getElementById("3x3"), document.getElementById("3x4"), document.getElementById("3x5"), document.getElementById("3x6"), document.getElementById("3x7"), document.getElementById("3x8"), document.getElementById("4x1"), document.getElementById("4x2"), document.getElementById("4x3"), document.getElementById("4x4"), document.getElementById("4x5"), document.getElementById("4x6"), document.getElementById("4x7"), document.getElementById("4x8"), document.getElementById("5x1"), document.getElementById("5x2"), document.getElementById("5x3"), document.getElementById("5x4"), document.getElementById("5x5"), document.getElementById("5x6"), document.getElementById("5x7"), document.getElementById("5x8"), document.getElementById("6x1"), document.getElementById("6x2"), document.getElementById("6x3"), document.getElementById("6x4"), document.getElementById("6x5"), document.getElementById("6x6"), document.getElementById("6x7"), document.getElementById("6x8")],  {
revertOnSpill: true
})
</script>

</body>
</html>



body {
    margin: 0;
}

nav {
    width: 100%;
    height: 3.5em;
    background-color: #ebc645;
    border-bottom: solid 3px #463e20;
}

#options {
    display: block;
    width: 95%;
    height: 4em;
    border-radius: 8px;
    margin: 1em auto 0 auto; 
    background-color: #ffffff; 

}

#listField {
    display: block;
    width: 95%;
    height: 30em;
    border-radius: 8px;
    margin: 1em auto 0 auto; 
    background-color: #ffffff; 
}

#generator {
    display: flex;
    justify-content: center;
    width: 95%;
    height: 12em;
    border-radius: 8px;
    margin: 1em auto 0 auto; 
    background-color: #ffffff;
    z-index: 9; 
}

#generatorOptions {
    display: flex;
    justify-content: center;
    width: 17%;
    height: 100%;

}

#generatorField {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 83%;
    height: 100%;

}

#newCombBtn {
    margin-top: .5em;
    display: inline-block;
    position: static;
    top: -5em;
    left: -8em;
    width: 35px;
    height: 37px;
    border-radius: 50%;
    background-color: #ebc645;
    z-index: 10;
}

#sidebar {
    float: right;
    width: 17%;
    height: 50em;
    margin: 1em 4px 0 0;
    display: inline-block;
    background-color: #ebc645;
    border-radius: 8px;
    border-bottom: solid 3px #463e20;
}

#workspace {

display: inline-block;
width: 82%;
height: 30em;
margin: 0;
float: left;

}


#row2 {
position: relative;
top: -3.8em;
left: 4.3em;

}

#row3 {
position: relative;
top: -7.6em;

}

#row4 {
position: relative;
top: -11.4em;
left: 4.3em;

}

#row5 {
position: relative;
top: -15.2em;

}

#row6 {
position: relative;
top: -19em;
left: 4.3em;

}



.cont {
    position: relative;
    top: 2em;
    display: inline-block;
    width:11%;
    height: 11em;
    /*background-color: black;*/
    background-color: rgba(red, green, blue, alpha);
    opacity: 1;
    border-radius: 8px;
    /*opacity: 0.5;*/
}

/*.cont > .box {

    position: inherit;
    width: 100%;
    height: 30px;
    background-color: blue;
    border-radius: 8px;
    border: solid 2px lightblue;
    transition: opacity 0.2s ease-in-out;
    cursor: grab;
}*/

/*.hexagon {
  position: relative;
  width: 133.77px; 
  height: 77.23px;
  background-color: #64C7CC;
  margin: 38.62px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 66.885px solid transparent;
  border-right: 66.885px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 38.62px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 38.62px solid #64C7CC;
}*/

.cont > .hexagon {
  position: relative;
  width: 133.77px; 
  height: 77.23px;
  background-color: #ebc645;
  margin: 38.62px 0;
  cursor: grab;
  z-index: 10;


}

.cont > .hexagon:before,
.cont > .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 66.885px solid transparent;
  border-right: 66.885px solid transparent;
  cursor: grab;
  z-index: 10;
}

.cont > .hexagon:before {
  bottom: 100%;
  border-bottom: 38.62px solid #ebc645;
  cursor: grab;
  z-index: 10;
}

.cont > .hexagon:after {
  top: 100%;
  width: 0;
  border-top: 38.62px solid #ebc645;
  cursor: grab;
  z-index: 10;
}

.cont > .hexagon > #likebtn {
    border-radius: 50%;
    left: 7em;
    display: inline-block;
    position: relative;
    width: 2em;
    height: 2em;

}

.cont > .hexagon > #deletebtn {
    border-radius: 50%;
    left: 1em;
    display: inline-block;
    position: relative;
    width: 2em;
    height: 2em;

}

/*Styling for generated hexagon inside generator div*/

#generatorField > .hexagon {
  position: relative;
  width: 150px; 
  height: 86.60px;
  background-color: #ebc645;
  margin: 43.30px 0;
  cursor: grab;
  z-index: 10;


}

#generatorField > .hexagon:before,
#generatorField > .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  cursor: grab;
  z-index: 10;
}

#generatorField > .hexagon:before {
  bottom: 100%;
  border-bottom: 43.30px solid #ebc645;
  cursor: grab;
  z-index: 10;
}

#generatorField > .hexagon:after {
  top: 100%;
  width: 0;
  border-top: 43.30px solid #ebc645;
  cursor: grab;
  z-index: 10;
}



//Javascript for "New Comb" generator in the bottom left

document.getElementById("newCombBtn").addEventListener("click", function() {
    var btn = document.createElement("div");
    btn.classList.add("hexagon");
    document.getElementById("generatorField").appendChild(btn);
});

Опять же, это может быть проблема с библиотекой Dragula. Но дочерние элементы div шестиугольника выпадают из шестиугольников при перетаскивании

...