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

IE/FireFox compatible drag code_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 19:10:34
Original
1028 people have browsed it

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;
    };
}

/*
    拖动结束
*/

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template