How to use Html+css to drag and drop navigation bar
Editor to share with you how to use Html+css to achieve drag and drop navigation bar, I hope you will learn something after reading this article, let's discuss it together!
Div horizontal drag sort
Body, div {
Padding: 0px
Margin: 0px
}
.box {
Position: relative
Margin-left: 15px
Padding: 10px
Padding-right: 0px
Width: 810px
Border: blue solid 1px
}
.box ul {
List-style: none
Overflow: hidden
Padding: 0
Margin:0
}
.drag {
Float: left
Border: # 000 solid 1px
Text-align: center
}
.box ul li a {
Display: block
Padding: 10px 25px
}
. drag-dash {
Position: absolute
Border: # 000 solid 1px
Background: # ececec
}
.dash {
Float: left
Border: 1px solid transparent
}
Div horizontal drag sort
Navigation one
Navigation two navigation
Navigation three
Navigation four
Guide five
$(document) .ready (function () {
Var range = {x: 0, y: 0}; / / Mouse element offset
Var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; / / drag the four coordinates of the object
Var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; / / coordinate initialization of the target element object
Var theDiv = null, move = false
Var choose = false; / / drag object drag state selected
Var theDivId = 0, theDivHeight = 0, theDivHalf = 0
Var tarFirstY = 0; / / initialization of the index, height, and height of the drag object.
Var tarDiv = null, tarFirst, tempDiv; / / object of the target element to be inserted, temporary dotted object
Var initPos = {x: 0, y: 0}
Width of the object dragged by var theDivWidth;//
$(".drag") .each (function () {)
$(this) .mousedown (function (event) {
Choose = true
/ / drag the object
TheDiv = $(this)
/ / record the initial position of the drag element
InitPos.x = theDiv.position () .left
InitPos.y = theDiv.position () .top
/ / relative offset of mouse element
Range.x = event.pageX-theDiv.position () .left
Range.y = event.pageY-theDiv.position () .top
TheDivId = theDiv.index ()
TheDivWidth = theDiv.width ()
TheDivHalf = theDivWidth / 2
TheDiv.removeClass ("drag")
TheDiv.addClass ("drag-dash")
TheDiv.css ({left: initPos.x + 'px', top: initPos.y +' px'})
/ / create the position before the new element is inserted into the dragged element (dashed frame)
$(") .insertBefore (theDiv)
TempDiv = $(".dash")
$(".dash") .css ("width", theDivWidth)
Return false
});
});
$(document) .mouseup (function (event) {
If (! choose) {
Return false
}
If (! move) {
/ / restore the initial style of the object
TheDiv.removeClass ("drag-dash")
TheDiv.addClass ("drag")
TempDiv.remove (); / / Delete the newly created dashed div
Choose = false
Return false
}
TheDiv.insertBefore (tempDiv); / / drag the element into the position of the dotted line div
/ / restore the initial style of the object
TheDiv.removeClass ("drag-dash")
TheDiv.addClass ("drag")
TempDiv.remove (); / / Delete the newly created dashed div
Move = false
Choose = false
Return false
}) .mousemove (function (event) {
If (! choose) {return false}
Move = true
LastPos.x = event.pageX-range.x
LastPos.y = event.pageY-range.y
LastPos.x1 = lastPos.x + theDivWidth
/ / drag and drop elements to move with the mouse
TheDiv.css ({left: lastPos.x + 'px', top: lastPos.y +' px'})
/ / drag the element to find and insert the target element with the mouse
Var $main = $('.drag'); / / Local variable: get the coordinates of each element again in the rearranged order
$main.each (function () {
TarDiv = $(this)
TarPos.x = tarDiv.position () .left
TarPos.y = tarDiv.position () .top
TarPos.x1 = tarPos.x + tarDiv.width () / 2
TarFirst = $main.eq (0); / / get the first element\
TarFirstX = tarFirst.position () .left + theDivHalf; / / the central ordinate of the first element object
/ / drag the object to the first position
If (lastPos.x = tarPos.x-theDivHalf & & lastPos.x1 > = tarPos.x1) {
TempDiv.insertAfter (tarDiv)
}
});
Return false
});
});
After reading this article, I believe you have a certain understanding of "how to use Html+css to achieve drag and drop navigation bar". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!
