Using Yui to create their own drag-and-drop web page

The first time you can see in the Web page like the client software drag and drop is on the 3721 site, at that time did not see the day to understand. Now this technology has a lot of applications, which we feel the deepest is the Sohu,sina blog layout function, compared to ordinary other pages, I believe we can feel the existence of its advantages.

A lot of people ask, what kind of technology does this web page do? Good to learn. It is actually implemented in JavaScript and is a high-level application of JavaScript. To write all of their own code of work will be relatively large, we can use the mature Yui (Yahoo user Interface Library) to do. Yui everyone can go to Yahoo's website download. The website is: http://developer.yahoo.com/yui/.

Here is an analysis that I do with examples:

<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 above 5 statements are included Yui script, all the script as long as contains these several statements can implement drag-and-drop function, the path is a relative path, you can write the script and the Yui function library location to modify.

<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 most important script, defining a Primary object Newhappyapp, and then defining two variables in the function based on the number of layers needed to operate, initializing the two variables in the INIT function, Call the initial function for YAHOO.util.DD, is Yui provides a drag-and-drop object, parameters for the layer ID, here we use blog and archives.

<div id= "blog" > Log </div>
<div id= "Archives" > Personal files </div>

Above is defined two layers, IDs are blog and archives, respectively, representing logs and personal files.

  Put this code into a text file, save it in a Web page format, and you can see the effect of your own drag and drop. Of course, this is just a simple example, in the actual application, we can use CSS style, background, etc. to beautify it.