Home >Web Front-end >JS Tutorial >IE/FireFox compatible drag code_javascript skills

IE/FireFox compatible drag code_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:10:34997browse

Features:
1. Compatible with IE6, FF, Opear (IE7 has not had a chance to test yet)
2. Smooth dragging
3. There is a transition between the starting point and the end point, making the movement smoother (adjustable)

Demo

/*
Author: misshjn
HomePage: http://www.happyshow.org
Date: 2007-04-30

Drag start
*/
function _getStyle(element,styleProp){
if (element.currentStyle){
var y = element.currentStyle[styleProp];
}else if (window .getComputedStyle){
var y = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp.replace(/([A-Z])/g,"-$1").toLowerCase());
}
return y;
}
function _elementOnmouseDown(evt,blockID){
var obj, temp;
obj=document.getElementById(blockID);
var x = evt. clientX || evt.pageX;
var y = evt.clientY || evt.pageY;
obj.startX=x-obj.offsetLeft; >
var d = document.createElement("div");
d.style.position = "absolute";
d.style.width = obj.clientWidth parseInt(_getStyle(obj,"borderLeftWidth" ),10) parseInt(_getStyle(obj,"borderRightWidth")) -2 "px";
d.style.height = obj.clientHeight parseInt(_getStyle(obj,"borderTopWidth"),10) parseInt(_getStyle( obj,"borderBottomWidth")) -2 "px";
d.style.border = "1px dashed #666";
d.style.top = _getStyle(obj,"top");
d.style.left = _getStyle(obj,"left");
d.style.zIndex = "9999";
document.body.appendChild(d);
document.onmousemove=function(evt ){
d.style.left= (evt?evt.pageX:event.clientX) - obj.startX "px";
d.style.top= (evt?evt.pageY:event.clientY) - obj.startY "px";
};
document.onmouseup=function(){
var objL = parseInt(_getStyle(obj,"left"),10);
var objT = parseInt(_getStyle(obj,"top"),10);
var obj2L = parseInt(d.style.left,10);
var obj2T = parseInt(d.style.top,10);

var todolist = [];
var level = 10; //The transition level of element movement from the starting point to the end point, an integer greater than 0
var speed = 10; //Milliseconds, every The interval between moves. The larger the number, the stronger the sense of animation, but the greater the sense of jumping
for (i=1; i todolist.push(function(t){
setTimeout(function(){ obj.style.left = objL (obj2L-objL)*(t/level) "px";
obj .style.top = objT (obj2T-objT)* (t/level) "px";
if(t==i)todolist=null;
},speed*arguments[0]);
});
}
        for (i=1; i            todolist[i-1](i);
        }
        document.body.removeChild(d);
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

/*
    拖动结束
*/

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn