조회 : 106
<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가 적었어요.
제목 |
---|
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js) |
유용한 리눅스(LINUX) 명령어 |
[공지] 기술 게시판 |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
---|---|---|---|---|---|---|
4.28
|
4.29
|
4.30
|
5.1
|
5.2
|
5.3
|
5.4
|
5.5
|
5.6
|
5.7
|
5.8
|
5.9
|
5.11
|
|
5.12
|
5.13
|
5.14
|
5.15
|
5.16
|
5.17
|
5.18
|
5.19
|
5.20
|
5.21
|
5.22
|
5.23
|
5.24
|
5.25
|
5.26
|
5.27
|
5.28
|
5.29
|
5.30
|
5.31
|
6.1
|