The simplest drag and drop effect implementation code in js

The simplest drag and drop effect implementation code in js_layout and layers

WBOY

Release： 2016-05-16 18:19:13

Original

1269 people have browsed it

In fact, for the pop-up layer, the original purpose of dragging is very simple, which is to make the content blocked by the pop-up layer visible by pulling the layer apart. (Of course, the drag-and-drop function was continuously optimized later, making the drag-and-drop application useful. In other words, the most typical example is iGoogle's customized homepage, which allows users to customize the order and location of content modules through drag and drop).

The focus of this article is not the drag and drop effect of iGoogle, which is an advanced article. This article is the "first level" of drag and drop. As the title states, it implements the simplest drag and drop.
The “simplest” here means not considering the stacking order of multiple drag layers, drag range restrictions, effects similar to iGoogle’s “dragTo”, etc. . .

Well, without further ado, let me show you an example first:

Try dragging me...
content...Click here-->Open due I embed all the codes directly on the page, and due to the third-party plug-in of the blog park, the code execution efficiency is high, but it may not run very smoothly

Drag-and-drop actually involves three parts of the mouse Events, onmousedown, onmouseup, onmousemove, combined with obtaining the position of the mouse and the left and top of the layer can achieve similar effects.

There are two things to pay attention to when coding. One is to get the current style. currentStyle is only valid under IE, so for non-IE we can achieve it through getComputedStyle (of course, for this kind of need to obtain If there are not many attributes, you can also directly use obj.style[key] to get the attribute value you currently want)

Copy code The code is as follows:

 
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key ]}//'currentStyle' only for ie5.0 

Another point is to use event when getting the mouse position. Event is very strange. It is a local variable under IE and under the moz kernel. It is a global variable (not accurate, just easy to understand), so when getting the mouse position, you need to make a judgment on the event

Copy code The code is as follows:

 
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' local variable under ie, under ff Global variable 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 

Well, pay attention to the above two points , it is actually possible to combine the correct ideas, it is not difficult, the reference code is provided below:

Copy the code The code is as follows :

 
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0 

var drag = function(bar, target){ 
var params = { 
startLeft:0, 
startTop:0, 
_X:0, 
_Y:0, 
isDrag:false 
}; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
bar.onmousedown = function(e){ 
e = e ?e:window.event; //'event' local variable under ie, global variable under ff 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 
document.onmouseup = function(){ 
params.isDrag = false; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle( target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
}; 
document. onmousemove = function(e){ 
var e = e?e:window.event; 
if(params.isDrag){ 
var curX = e.clientX, curY = e.clientY, desL = curX -params._X parseInt(params.startLeft), desT = curY-params._Y parseInt(params.startTop); 
target.style['left'] = desL>=0?desL 'px':0; 
target.style['top'] = desT>=0?desT 'px':0; 
} 
} 
}; 

Well, that’s it for this article It’s almost over. Regarding the similar iGoogle drag and drop advanced article, I will continue it when I have time. Here is an example of a comprehensive pop-up layer combined with drag and drop.

A box without any options parameters (the default is high 200px, width 300px)
Unmasked box
This pop-up layer plug-in is what I mentioned above, and the source file download is also provided, so I just added it here It’s just a dragging effect
ps: Due to the code highlighting plug-in, there will be small white squares on the mask layer, which has not been processed yet. . .