EonerCMS-CMS (12) for a desktop-like system)

Drag the idea of implementation has been updated, in order to prevent everyone into the misunderstanding, this article does not need to read too fine, the implementation of ideas please refer to: http://www.cnblogs.com/hooray/archive/2012/03/23/2414410.html

Sort by icon dragging

I recently added a person, gave me a lot of comments, and helped me test some bugs. The update I want to talk about is the function of icon dragging and sorting. At first, I thought it would be very difficult to implement it. When I started to do it, I found that this was not the case. Next I will tell you a little bit about my ideas.

First, the implementation code of icon dragging and window dragging is almost the same. If you are not clear about this, let's take a look at my previous article "EonerCMS -- making a CMS (4) similar to a desktop system". I use win7 as a reference for the style effects of dragging,

When we drag an icon, the original icon does not move, and then copies an icon as translucent as it is, then releases the mouse, deletes the original position, and updates it to the moving position,

After thinking clearly, you can start to do it. First, copy a translucent icon and trigger the event when I left the mouse button mousedown.

$(document).on("mousedown","#desk ul li",function(e){$(document.body).append('<li id="shortcut_shadow" style="position:absolute;display:none">'+$(this).html()+'</li>');......});

Note: When I mousedown, the copied translucent icon is not displayed. It is displayed only when the mouse is pressed and dragged.

$ (Document ). on ("mousedown", "# desk ul li", function (e) {$ (document. body ). append ('<li id = "shortcut_shadow" style = "position: absolute; display: none"> '{}(this}.html () +' </li> '); var obj = $ ('# shortcut_shadow ');...... // adds the background mask layer _ cache. moveLayOut = GetLayOutBox (); var lay = ($. browser. msie )? _ Cache. moveLayOut: $ (window); // binds the mouse movement event lay. off ("mousemove "). on ("mousemove", function (e) {obj. show ();});});

Of course, as long as it is a drag function, I will add a transparent background mask layer to avoid triggering some click events or hover effects on the desktop. The complete code for dragging is as follows:

$ (Document ). on ("mousedown", "# desk ul li", function (e) {$ (document. body ). append ('<li id = "shortcut_shadow" style = "position: absolute; display: none"> '{}(this}.html () +' </li> '); var obj = $ ('# shortcut_shadow'); var oldobj = $ (this); x = e. screenX; // lefty = e. screenY; // The topsT where the mouse is located on the screen =$ (this ). offset (). top; sL = $ (this ). offset (). left; // adds the background mask layer _ cache. moveLayOut = GetLayOutBox (); var lay = ($. browser. msie )? _ Cache. moveLayOut: $ (window); // binds the mouse movement event lay. off ("mousemove "). on ("mousemove", function (e) {obj. show (); _ cache. moveLayOut. show (); eX = e. screenX; // lefteY = e. screenY; // The toplessX = eX-x where the mouse is located on the screen; // The offset lessY = eY-y from the initial position; // offset from the initial position _ l = sL + lessX; _ t = sT + lessy1_obj.css ({left: _ l, top: _ t }). attr ("left", _ l ). attr ("top", _ t );});});

The next step is to update the icon position when the mouse is raised, and the event is mouseup. This is the way to implement the function. Because I have previously written the window resize event, the resize event will update the display position of all the icons on the page, however, he ordered the code based on the icon. This specialized term seems to be called the DOM tree. That is, all I need to do is update the dom tree of the icon. At this time, no changes are displayed on the page, and then the icon sorting on the page is refreshed through the resize event, we can see from the two images that we can see.

At this time, the updated dom tree does not call the resize event, so although the code order has changed, the page cannot be changed because the icon is absolutely positioned. Now let's call the resize event.

How to calculate the position where the icon is moved, that is, to obtain the current position of the translucent icon, calculate the number of the current position in the dom tree of the icon, and then delete the node of the original icon, add a new node to the latest location. For more information, see the complete implementation code.

// Bind the mouse to lift the event lay. off ("mouseup "). on ("mouseup", function () {_ cache. moveLayOut. hide (); obj. remove (); if ($. browser. msie) {_ cache. moveLayOut [0]. releaseCapture () ;}$ (this ). off ("mousemove"); // move the icon var num = parseFloat (parseInt (obj. attr ("top")-Core. config. shortcutTop)/90); if (! IsNaN (num) {var arowcount = parseInt ($ (window ). height ()-Core. config. shortcutTop)/90); num + = parseInt (obj. attr ("left") + 40-Core.config.shortcutLeft)/90) * arowcount; num = num >=$ ("# desk ul li: last "). index ()? $ ("# Desk ul li: last"). index (): num; // if the icon position changes, update if (oldobj. index ()! = ParseInt (num) {// update domif (num <= 0) {$ ("# desk ul li: eq (0 )"). before (oldobj);} else {$ ("# desk ul li: eq (" + parseInt (num) + ")"). after (oldobj);} // call the resize method to refresh the page icon coordinate Core. resize (0); // update the database icon sorting (ajax)-to be completed }}});

Note: "num" indicates the position of the translucent icon in the dom tree. Because the icons are arranged in a column, the formula is roughly as follows:(Number of each column * (currently in column-1) + number of columns in a column

This time we updated such a large feature and modified some small suggestions, so we will not list them. Test address: http://saw.caifutang.com/eonercms/