您所在的位置:小祥子 » 编程 » JavaScript » 正文

Javascript实现带阴影的拖拽效果

时间:2015-06-07 编辑:夏目家的猫 来源:本站整理

带阴影的拖拽效果其实就是在鼠标按下,创建一个和拖拽区域一样的块,影子就是改变了块的opacity值。

CSS">#shadow{opacity:.3;filter:alpha(opacity=30);}

创建影子

objDrag.onmousedown = function(evt){
    var that = this;
    var evt = getEvent(evt);
    disX = evt.clientX - this.offsetLeft;
    disY = evt.clientY - this.offsetTop;
    var shadow = document.createElement('div');
    shadow['id'] = 'shadow';
    shadow.style.left = this.currentStyle ? this.currentStyle['left'] : getComputedStyle(this, null)['left'];
    shadow.style.top = this.currentStyle ? this.currentStyle['top'] : getComputedStyle(this, null)['top'];
    shadow.style.zIndex = zIndex++;
    document.body.appendChild(shadow);
    //其他代码
			   

移动的是影子,而不是拖拽区域本身

一开始,我们移动的是影子而不是拖拽区域本身,所以,这次改变的是影子的left和top值。注意和不带影子的拖拽的区别。

shadow.style.left = currentLeft + 'px';
shadow.style.top = currentTop + 'px';

影子在哪,我就在哪

如何做到身随影动呢?
有一点很好理解,当我们抬起鼠标时,影子就不会动,也就是触发onmouseup事件之后,影子就不动了。要实现,影子停在某处,拖拽区域就停在某处,只要拖拽区域的left和top值和影子的left和top值相同即可。

//当鼠标抬起的时候, 让物体和影子重合
that.style.left = shadow.style.left;
that.style.top = shadow.style.top;
that.style.zIndex = shadow.style.zIndex;

最后 还有一点要注意,在触发onmouseup事件时,移除到临时创建的影子节点,否则你会发现,移动一次之后,就无法再移动了。

document.body.removeChild(shadow);
关键词:阴影 效果