Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Backend Development > PHP Tutorial > In-depth functional analysis of PHP wishing wall module_PHP tutorial

In-depth functional analysis of PHP wishing wall module_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release： 2016-07-21 15:03:04
Original
1975 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:

Copy the code 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:
Copy code The code is as follows:



Using window.captureEvents
Latest Articles by Author
Latest Issues
javascript - Error when uploading local project to github
From 1970-01-01 08:00:00
0
0
0
javascript - How can I display text instead of dots by default before the password is entered on the registration page?
From 1970-01-01 08:00:00
0
0
0
Team collaboration - What should I do if someone needs the feature I wrote as a dependency in git flow?
From 1970-01-01 08:00:00
0
0
0
Objective-c - Constraints for iOS a warning issue
From 1970-01-01 08:00:00
0
0
0
Confusion about using gitlab's fork&pull request mode within the team
From 1970-01-01 08:00:00
0
0
0
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved