Jam's story

[JS] 드래그 본문

WEB/JavaScript

[JS] 드래그

애플쩀 2022. 6. 9. 12:23 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <!-- 상대경로 맞추기 -->
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<style>
 div.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border: solid 1px gray;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
    $(function() {
        $(".draggable").draggable();
    });
</script>
</head>
<body>
    <div class="draggable" class="ui-widget-content">
        <p>드래그</p>
    </div>
   <h3 class="draggable">하이</h3>
</body>
</html>

드래그

하이

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 11:44:37</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .myDiv{
      background-color: #f1f1f1;
      text-align: center;
      border:1px solid #d3d3d3;
      
      position: absolute;
      
      z-index:9;
    }
    .myDivHeader{
      padding: 10px;
      cursor: move;
      z-index:10;
      background-color: #2396F3;
      color:#fff;
    }
  </style>
</head>
<body>
<h3>ex04_08.html</h3>
<div id="myDiv1" class="myDiv">
    <div id="myDiv1Header" class="myDivHeader">clickHear</div>
    <p>Lorem.</p>
    <p>Non.</p>
    <p>Id.</p>    
</div>
<div id="myDiv2" class="myDiv">
    <div id="myDiv2Header" class="myDivHeader">clickHear</div>
    <p>Lorem.</p>
    <p>Non.</p>
    <p>Id.</p>    
</div>
<div id="myDiv3" class="myDiv">
    <div id="myDiv3Header" class="myDivHeader">clickHear</div>
    <p>Lorem.</p>
    <p>Non.</p>
    <p>Id.</p>    
</div>
<script>
    function draggable(elemt){
        //이동한 거리 좌표
        var moveX=0, moveY=0;
        var elemtX=0, elemtY=0;

        if(document.getElementById(elemt.id+"Header")){
            document.getElementById(elemt.id+"Header").onmousedown=dragMouseDown;
        }//if

//중첩함수
function dragMouseDown(e){
 e= e||window.event;
 //alert(e.button); //0 왼쪽마우스 2오른쪽마우스 1가운데 휠마우스
 //console.log( e.clientX+","+e.clientY);
    elemtX= e.clientX;
    elemtY= e.clientY;

// 마우스 관련 이벤트 등록
document.onmousemove=elementDrag;
document.onmouseup=closeDragElement; //마우스를 놓을때 

//마우스 무브
function elementDrag(e){
    e= e||window.event;
    //이동한 거리 
    moveX=elemtX-e.clientX;
    moveY=elemtY-e.clientY;
     //원래있던 위치값
elemt.style.left=(elemt.offsetLeft-moveX)+"px";
elemt.style.top=(elemt.offsetTop-moveY)+"px";

elemtX=e.clientX;
elemtY=e.clientY;

}
//마우스업
function closeDragElement(e){
    //마우스관련이벤트제거 
    document.onmousemove=null;
    document.onmouseup=null;
}
} //dragMouseDown

    }

    // $(".draggable").draggable(); 와 같다 .
    draggable(document.getElementById("myDiv1"));
    draggable(document.getElementById("myDiv2"));
    draggable(document.getElementById("myDiv3"));
</script>
</body>
</html>
2022.06.09 11:44:37

ex04_08.html

clickHear

Lorem.

Non.

Id.

clickHear

Lorem.

Non.

Id.

clickHear

Lorem.

Non.

Id.

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS]window.alert()  (0) 2022.06.10
[JS] 새창 열고 닫기  (0) 2022.06.09
[JS] 클로저  (0) 2022.06.09
[JS] function (함수) 정리  (0) 2022.06.09
[JS] 이벤트 버블링  (0) 2022.06.09
'WEB/JavaScript' Related Articles more
Comments