Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.