Javascript is characterized by dom processing and web page effects. In most cases, we only use the simplest functions of this language, such as making image carousel/Webpage tabs, this article will show you how to drag and drop your webpage.
There are many reasons to add the drag-and-drop function to your website. The simplest one is data restructuring. for example, if you have a sequence of content for user sorting, You need to input each entry or select it using select. Instead of dragging the preceding method. maybe your website also needs a navigation window that users can drag! These effects are simple: you can easily implement them!
Dragging on a webpage is not complicated. First, you need to know the coordinates of the mouse, and second, you
<STYLE type = text/css> LI {MARGIN-BOTTOM: 10px} OL {MARGIN-TOP: 5px }. dragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BACKGROUND-COLOR: # eee }. dragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. dragDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. miniDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {FILTER: alpha (opacity = 50); BACKGROUND-COLOR: # ff99cc} LEGEND {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial} FIELDSET {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px }. history {FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px} # DragContainer8 {BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px }. miniDragBox {FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px} PRE {BORDER-RIGHT: # ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: # ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: # ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: # ccc 1px solid; BACKGROUND-COLOR: # f8f8f0 }</STYLE> <body> <FIELDSET id = Demo4> <LEGEND> example-drag a page element </LEGEND> <DIV class = DragContainer id = DragContainer4 overclass = "OverDragContainer"> <DIV class = DragBox id = Item1 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #1 </DIV> <DIV class = DragBox id = Item2 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #2 </DIV> <DIV class = DragBox id = Item3 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #3 </DIV> <DIV class = DragBox id = Item4 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #4 </DIV> <DIV class = DragContainer id = DragContainer5 overclass = "OverDragContainer"> <DIV class = DragBox id = Item5 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #5 </DIV> <DIV class = DragBox id = Item6 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #6 </DIV> <DIV class = DragBox id = Item7 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #7 </DIV> <DIV class = DragBox id = Item8 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #8 </DIV> <DIV class = dragContainer id = DragContainer6 overclass = "OverDragContainer"> <DIV class = DragBox id = Item9 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #9 </DIV> <DIV class = dragBox id = Item10 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #10 </DIV> <DIV class = DragBox id = Item11 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #11 </DIV> <DIV class = DragBox id = Item12 overclass = "OverDragBox" dragclass = "DragDragBox"> Item #12 </DIV>/ DIV> </FIELDSET> </body>
Tip: the code can be modified before running!
Get mouse movement information
First, we need to get the coordinates of the mouse. we can add a User Function to document. onmousemove:
Document. onmousemove = mouseMove;
Function mouseMove (ev ){ Ev = ev | window. event; Var mousePos = mouseCoords (ev ); }
Function mouseCoords (ev ){ If (ev. pageX | ev. pageY ){ Return {x: ev. pageX, y: ev. pageY }; } Return { X: ev. clientX + document. body. scrollLeft-document. body. clientLeft, Y: ev. clientY + document. body. scrollTop-document. body. clientTop }; } |
Mouse X Position:<input id=xxx type=text><br>Mouse Y Position:<input id=yyy type=text></body>
Tip: the code can be modified before running!
- 5 pages in total:
- Previous Page
- 1
- 2
- 3
- 4
- 5
- Next Page