조회 : 382
<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'>
처럼 하면 됩니다.
그리고나서 이미지를 이동해보세요.
--------------------------------------------=------------------
FF와 IE의 구별은 document.all 로 합니다.
사실 이렇게 하는것 보다는 브라우저 이름 읽어와야하지만,
IE가 .all을 혼자 쓰기 때문에...
----------------------------------------------=-------------
사용하실 때는 
"공대여자는 예쁘다."
를 가슴 속으로 외치고 사용하세요.
-mins가 적었어요.
| 제목 | 작성자 | 날짜 | 
|---|---|---|
| 공대여자 | ||
| 공대여자 | ||
| mins01 | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins | ||
| mins |