In-depth functional analysis of PHP wishing wall module_PHP tutorial
WBOY
Release: 2016-07-21 15:03:04
Original
1937 people have browsed it
Wish Wall Module Function Analysis 1. Hotspot Technology 1. Implement drag-and-drop DOM technology to move wishing notes The purpose of the Draggable DOM pattern is to allow the viewer to define the position of each element on the page, and just use the mouse to select the part to be moved and drag it to the new position. Pages can be customized.
DOM is the abbreviation of Document Object Model. It is an interface that is independent of browser, platform and language, allowing users to access other standard components of the page. DOM is a collection of nodes or pieces of information organized in a hierarchical structure. This hierarchy allows developers to navigate the tree looking for specific information. Analyzing this structure typically requires loading the entire document's construction hierarchy before doing any work. Since it is based on information hierarchy, DOM is said to be tree-based or object-based. In specific implementation, the following times will be triggered: (1)moveStart (2)Move (3)moveEnd When pressed When you press the left mouse button and start moving the mouse, the moveStart event will be triggered on the dragged wish bar. Users can use the moveStart event handler to enable javaScript code when dragging begins. When the moveStart event is triggered, the Move time will always be triggered as long as the object is still being dragged. When dragging stops, the moveEnd event is triggered. echo outputs the wish bar style layout, the code is as follows:
When the left mouse button is pressed, Apply mouse time onmousedown to trigger the Move() function
Copy code
The code is as follows:
var Layer=''; document.onmouseup=moveEnd; document.onmousemove=moveStart; var b; var c; function Move(Object, event){ //Mobile DIV wish note Layer=Object.id; if(document.all){ document.getElementById(Layer).setCapture(); b=event.x -document.getElementById(Layer).style.pixelLeft; //Set the left border c=event.y-document.getElementById(Layer).style.pixelTop; //Set the right border }else if(window .captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); b=event.layerX; //Return the abscissa coordinate of the time object relative to the body c=event.layerY; / /Return the ordinate of the time object relative to the body } /**When the mouse clicks on the note, the note will be placed on **/ document.getElementById(Layer).style.zIndex=iLayerMaxNum; iLayerMaxNum=iLayerMaxNum+1; /********************************/ }
document.all is an array variable composed of all tags in the document, including all elements in the document object. This array can Access all elements in the document. Syntax: document.all[i] document.all[name] document.all.tags[tagname] Description: all[] is a multifunctional array-like object that provides access to all HTML elements in the document. The all[] array originated from IE4 and has been adopted by many other browsers
all[] has been used by the standard getElementById() method and getElementByTagName() method of the Document interface and the getElementByName() method of the Document object. replace. The elements contained in
all[] preserve their original order, and if you know their exact numeric position in the array, you can extract them directly from the array. However, it is more common to use the all[] array to access elements based on their HTML attribute name or id. If the element has the specified name, you will get an array of elements sharing the same name. document.all can determine whether the browser is IE
Copy the code The code is as follows:
if(document.all ){ alert("is IE!"); }
window.captureEvents() window.captureEvents(event1 | event2 | eventN) captureEvents( ) method captures all event types that occur. If multiple events occur, they are separated by | vertical bars; the main events of the captureEvents() method are as follows: Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event .RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD Sample code: