Build your own drag-and-drop webpage with Yui

The first time I saw that I could drag and drop on the 3721 website like a client software on the webpage, I did not understand it for a long time. There are already a lot of applications of this technology. Sohu and Sina Blog's fixed layout function are the ones we feel most deeply about. Compared with other general web pages, I believe everyone can feel their advantages.

Many people will ask, what technology is used for such a webpage? I really want to learn. In fact, it is implemented using JavaScript and belongs to a javascript advanced application. Write allCodeThe workload will be relatively large. We can use mature Yui (Yahoo user interface library. You can download Yui from the Yahoo website. URL: http://developer.yahoo.com/yui /.

The following is an analysis based on the example:

<SCRIPT type = "text/JavaScript" src = ".../build/Yahoo/yahoo-min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = ".../build/event/event-min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = ".../build/DOM/dom-min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = ".../build/logger/logger-min.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = ".../build/dragdrop/dragdrop-debug.js"> </SCRIPT>

// The preceding five statements contain Yui scripts. All the scripts can be dragged and dropped as long as they contain these statements. The path uses a relative path, you can modify it based on the script you have written and the storage location of the Yui function library.

<SCRIPT type = "text/JavaScript">
Newhappyapp = function (){
VaR DD, dd2;
Return {
Init: function (){
Dd = new Yahoo. util. dd ("blog ");
Dd2 = new Yahoo. util. dd ("Archives ");
 
}
}
}();

Yahoo. util. event. ondomready (newhappyapp. init );
</SCRIPT>

// The above script is the main script that defines a main object newhappyapp. In the function, two variables are defined based on the number of layers to be operated. In the init function, the two variables are initialized, the initial function called is Yahoo. util. dd is a drag-and-drop object provided by Yui. The parameter is the layer ID. Here we use blog and archives.

<Div id = "blog"> logs </div>
<Div id = "Archives"> archive </div>

The preceding two layers are defined. The IDS are blog and archives, respectively, indicating logs and personal files.

Put this code in a text file and save it as a webpage. Then you can see your own drag and drop effects. Of course, this is just a simple example. In actual application, we can beautify the layer by using CSS styles and backgrounds.