Drag and drop is still a good page effect. Personally, I think its vitality lies in letting users do some operations themselves, so-called customization. For example:

① Drag and drop browser tabs to switch the order.

Now basically all tabbed browsers have the function of sequentially dragging and switching, as shown in the following figure:

Browser tab switch.

You can also see a similar effect in the QQ news pop-up box, as shown in the following figure:

QQ pop-up window options switch Zhang Xinxu-Xin Space-Xin Life in order.

2 put the content in your favorite position.

This is most common in desktop software, such as video player, Adobe series software (CS3+) and so on.

Drag and Drop Zhang Xinxu in photoshop-New Space-New Life

On the web page, we will also see the effect of dragging, but it is generally not too complicated. For example, iGoogle (click here to visit): //zxx: Domain names no longer end with points cn, but with points com and hk.

Drag and drop igoogle page Zhang Xinxu-New Space-New Life

Or Sina Weibo, which I often use recently, has a drag-and-drop pop-up layer, which is different from the pop-up layer of everyone or QQ mailbox. The advantage is that when I enter some information, I often need to look at some content on the page. By dragging, I can move the pop-up box to one side, so that I can see the blocked information below, which is also the core and basic function of dragging. (The picture below shows the layer that pops up after clicking the login button on Sina Weibo registration page. )

Sina Weibo registration page login pop-up layer Zhang Xinxu-Xin Space-Xin Life.

Second, the introduction of JavaScript implementation principle

In AS3, you can use startDrag () to drag, but in js, there is no such method, but it can be realized. To put it bluntly, it's quite simple. There are many ways to achieve drag and drop. As for me, js skills are still relatively shallow, and I only know one realization principle. As follows:

① mouse press+mouse movement → drag and drop

② Release the mouse → Do not drag.

③ Mouse Offset → Drag Distance

The methods represented by JavaScript events are:

①onmousedown+onmousemove→start drag()

② onmouseup → stopDrag()

③ ……

The key is to assign the mouse offset value to the dragged object. For example:

For example, Xifeng wanted to drag you home as a husband, but you didn't want to, and as a result, it couldn't move, just like we couldn't move an ordinary page element.

Yes, Xifeng is a "beauty" that she has never seen before and after 500 years. She has profound skills. She binds you with an invisible internal force. You can't resist the internal force, so you can only be pulled back. As a result, in the eyes of outsiders, you followed Xifeng on your own initiative. Just like dragging, the dragged element moves as much as the mouse deviates, just like the element follows the mouse.

Well, I won't say the details, for fear that there will be sandstorms (chaos) if I say too much, then I will be a sinner.

Third, the effect display, coding and use

The first two paragraphs are very short. I admit that they are too long, but unlike the Shanxi vaccine, there is no water in this part.

I encapsulated the drag-and-drop effect in a method. In this example, this method is independent in the js file and can also be used as a small plug-in.

The size of this drag-and-drop effect js after compression is less than 1K, and it only needs dozens of lines of code to complete. I don't like to put long codes in articles.

You can click here: zxx.drag. 1.0.js or the compressed version of zxx.drag. 1.0-min.js (right-click-[target | link] as "download").

Use as follows:

First call the js file, as shown below:

& ltscript src="/xtkf/？ dy/js/zxx . drag . 1.0 . js " type = " text/JavaScript " & gt； & lt/script & gt；

Then use the startDrag () method to bind the drag-and-drop effect. The startDrag () method has two parameters. The first is the clicked object (that is, clicking there can realize dragging, such as the title bar of a popup layer), and the second is the dragged object (such as a popup layer). That is, startDrag (trigger drag object, dragged object). I made a simple chart, as follows:

Dragging indicates Zhang Xinxu-new space-new life.

Use the following sample code:

HTML/CSS

& ltstyle type="text/css " >

# box {Location: absolute; Left:100px; top: 100 px； Fill: 5px background: # f03f9font-size:12px; -moz-box-shadow:2px 2px 4px # 666666； -WebKit-box-shadow:2px 2px 4px # 666666； }

# main { border: 1px solid # a0b3d 6； Background: white; }

# bar { line-height:24px； Background: # beceebborder-bottom:1pxsolid # a0b3d6; Left padding: 5px cursor: moving; }

# content { width:420 px； Height: 250px Filling:10px5px; }

& lt/style & gt；

& ltdiv id = " box " & gt

& ltdiv id = " main " & gt

& ltdiv id = "bar"> drag.