На скрине. Поменять нужно местами "Уроки" и "Главная". Прикол в том, что у "Уроков" drop меню и если я меняю чисто id и div'ы в html, то drop не работает.
-
1ответ вам тоже скринами дать ?– Monkey Mutant2 мая 2020 в 10:41
-
1используйте флексбокс - order– Monkey Mutant2 мая 2020 в 10:46
Добавить комментарий
|
1 ответ
var dragSrcEl = null;
function handleDragStart(e) {
// Target (this) element is the source node.
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.outerHTML);
this.classList.add('dragElem');
}
function handleDragOver(e) {
if (e.preventDefault) {
// Necessary. Allows us to drop.
e.preventDefault();
}
this.classList.add('over');
// See the section on the DataTransfer object.
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
}
function handleDragLeave(e) {
// this / e.target is previous target element.
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
this.parentNode.removeChild(dragSrcEl);
var dropHTML = e.dataTransfer.getData('text/html');
this.insertAdjacentHTML('beforebegin', dropHTML);
var dropElem = this.previousSibling;
addDnDHandlers(dropElem);
}
this.classList.remove('over');
return false;
}
function handleDragEnd(e) {
this.classList.remove('over');
}
function addDnDHandlers(elem) {
elem.addEventListener('dragstart', handleDragStart, false);
elem.addEventListener('dragenter', handleDragEnter, false)
elem.addEventListener('dragover', handleDragOver, false);
elem.addEventListener('dragleave', handleDragLeave, false);
elem.addEventListener('drop', handleDrop, false);
elem.addEventListener('dragend', handleDragEnd, false);
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, addDnDHandlers);
[draggable] {
user-select: none;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit
}
/* clearfix */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
body {
margin: 0;
padding: 0;
}
/* clearfix-end ========================*/
.wrapper group {
max-width: 1024px;
margin: 0;
padding: 0;
}
.navbar {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
background: white;
overflow: auto;
}
.navbar li a:hover,
.navbar .dropdown:hover .dropbtn {
background: mediumseagreen;
}
.navbar li {
float: left;
}
.content {
padding: 0 20px;
text-align: center;
}
.navbar li a,
.navbar .dropbtn {
color: black;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.navbar {
width: 100%;
position: relative;
height: auto;
}
.navbar li {
float: left;
}
.content {
float: none;
width: 100%;
text-align: justify;
}
}
@media screen and (max-width: 400px) {
.navbar li,
.content {
float: none;
text-align: center;
}
}
<ul id="columns" class="navbar">
<li class="column" draggable="true"><a class="active" href="#">Home</a></li>
<li class="column" draggable="true"><a href="#">News</a></li>
<li class="column" draggable="true"><a href="#">Contact</a></li>
<li class="dropdown column" draggable="true">
<a href="#" class="dropbtn"> Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
-
-
Если Вы видите какое-то другое альтернативное решение, то напишите) 2 мая 2020 в 11:27
-
-
Для элементов меню были описаны события, что анализирует был ли взят какой-то определенный элемент и куда был перемещен, в нашем случае li класса column, в зависимости от этого происходит удаление предыдущей позиции элемента и добавление этого элемента на позицию выбранного, остальные элементы смещаются в зависимости от того, куда был передвинут(перемещен) текущий элемент. 2 мая 2020 в 11:39
-