JAVASCRIPT로 레이어(기타등등) 이동(드래그)하기, FF가능버전
인터넷정보2007. 10. 11. 16:59
<style type="text/css">
.drag { position: relative; cursor:move }
</style>
<script type="text/javascript">
///------------ 마우스로 객체 드래그
var bdown = false;
var x, y;
var sElem;
//------------------------------------- 숫자 NaN체커
function changeInt(num){ //수평선 님 추가
var temp = parseInt(num);
if(isNaN(temp)){
temp = 0;
}
return temp;
}
//------------------------------------ IE/FF 공용처리
function mlayer_down(e) {
evt = e||window.event;
stop_bubble(evt)
sElem = evt.target || evt.srcElement ;
if(sElem.className == "drag") {
bdown = true;
x = evt.clientX;
y = evt.clientY;
}
}
function mlayer_up() {
bdown = false;
}
function mlayer_move(e) {
if(bdown) {
evt = e||window.event;
stop_bubble(evt)
var distX = changeInt(evt.clientX) - x;
var distY = changeInt(evt.clientY) - y;
sElem.style.left =(changeInt(sElem.style.left) + distX)+'px';
sElem.style.top = (changeInt(sElem.style.top) + distY)+'px';
x = changeInt(evt.clientX);
y = changeInt(evt.clientY);
return false;
}
}
function stop_bubble(evt){
if(window.event){
window.event.returnValue = true;
}else{
evt.stopPropagation();
evt.preventDefault()
}
}
//------------------- 이벤트 등록
if (!document.all){
//FF도 될 수 있도록
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mlayer_down;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mlayer_move;
document.captureEvents(Event.MOUSEUP);
document.onmouseup = mlayer_up;
}
else{
document.onmousedown = mlayer_down;
document.onmousemove = mlayer_move;
document.onmouseup = mlayer_up;
}
</script>
---------------=-------------------
위 스크립트를 첨부하고
<img class='drag' src='xxxx.jpg'>
처럼 하면 됩니다.
그리고나서 이미지를 이동해보세요.
.drag { position: relative; cursor:move }
</style>
<script type="text/javascript">
///------------ 마우스로 객체 드래그
var bdown = false;
var x, y;
var sElem;
//------------------------------------- 숫자 NaN체커
function changeInt(num){ //수평선 님 추가
var temp = parseInt(num);
if(isNaN(temp)){
temp = 0;
}
return temp;
}
//------------------------------------ IE/FF 공용처리
function mlayer_down(e) {
evt = e||window.event;
stop_bubble(evt)
sElem = evt.target || evt.srcElement ;
if(sElem.className == "drag") {
bdown = true;
x = evt.clientX;
y = evt.clientY;
}
}
function mlayer_up() {
bdown = false;
}
function mlayer_move(e) {
if(bdown) {
evt = e||window.event;
stop_bubble(evt)
var distX = changeInt(evt.clientX) - x;
var distY = changeInt(evt.clientY) - y;
sElem.style.left =(changeInt(sElem.style.left) + distX)+'px';
sElem.style.top = (changeInt(sElem.style.top) + distY)+'px';
x = changeInt(evt.clientX);
y = changeInt(evt.clientY);
return false;
}
}
function stop_bubble(evt){
if(window.event){
window.event.returnValue = true;
}else{
evt.stopPropagation();
evt.preventDefault()
}
}
//------------------- 이벤트 등록
if (!document.all){
//FF도 될 수 있도록
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mlayer_down;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mlayer_move;
document.captureEvents(Event.MOUSEUP);
document.onmouseup = mlayer_up;
}
else{
document.onmousedown = mlayer_down;
document.onmousemove = mlayer_move;
document.onmouseup = mlayer_up;
}
</script>
---------------=-------------------
위 스크립트를 첨부하고
<img class='drag' src='xxxx.jpg'>
처럼 하면 됩니다.
그리고나서 이미지를 이동해보세요.
'인터넷정보' 카테고리의 다른 글
인터넷 익스플로러 다운로드 제한 수 변경하는 방법 (0) | 2007.10.11 |
---|---|
입력창에 바로 한글 입력하기 ime-mode (0) | 2007.10.11 |
getElementsByTagNameNS 메소드란? (0) | 2007.10.11 |
금지태그 변환 (0) | 2007.10.11 |
select에 option동적으로 추가하기 (0) | 2007.10.11 |
키입력과 오른쪽 마우스 등 막기 (0) | 2007.10.11 |
로딩 레이어 만들기 (0) | 2007.10.11 |
현재 페이지의 스크립트 내용 알아오기 IE전용 (0) | 2007.10.11 |
정규식으로 오토링크 처리하기 (0) | 2007.10.11 |
mime type 알아오기 (0) | 2007.10.11 |