Drag & Drop

Links

예제 미리보기

수업 영상

html 기본 형식, p5.js 불러오기

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 웹에 공유되어있는 라이브러리 불러오기 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
        <script>
            // 여기에 입력
        </script>
    </head>
    <body>
    </body>
</html>

요소 옮기기

JavaScript
var elemX = 250;
var elemY = 250;
var elemSize = 100;
var dragging = false;

function setup(){
    createCanvas(500, 500);
    noStroke();
}

function draw(){
    background(235);

    // 드래그 중에 마우스가 움직인 만큼 요소를 움직여준다
    if(dragging){
        elemX = elemX + (mouseX - pmouseX);
        elemY = elemY + (mouseY - pmouseY);
    }


    // 요소의 영역안에 마우스가 들어왔을때 커서모양을 바꿔준다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2) cursor(HAND);
    else cursor(ARROW);

    // 요소 그리기
    fill(255, 100, 50);
    ellipse(elemX, elemY, elemSize, elemSize);
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(dist(mouseX, mouseY, elemX, elemY) < elemSize/2){
        dragging = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
// 드래그를 마친다
function mouseReleased(){
    dragging = false;
}

크기 조정하기

JavaScript
var elemX = 250;
var elemY = 250;
var elemSize = 100;
var dragging = false;
            
var edgeRange = 5;
var resizing = false;

function setup(){
    createCanvas(500, 500);
    strokeWeight(2);
}

function draw(){
    // 마우스와 요소 거리를 미리 구해놓는다
    var mouseDist = dist(mouseX, mouseY, elemX, elemY);
    
    background(235);

    // 드래그 중에 마우스가 움직인 만큼 요소를 움직여준다
    if(dragging){
        elemX = elemX + (mouseX - pmouseX);
        elemY = elemY + (mouseY - pmouseY);
    }
    
    // 크기조정 중에 마우스와 요소의 거리만큼 요소 크기를 정한다
    if(resizing){
        elemSize = mouseDist*2;
    }
    
    // 요소의 영역 + 모서리영역 안에 마우스가 들어왔을때 커서모양을 바꿔준다
    if(mouseDist < elemSize/2 + edgeRange) cursor(HAND);
    else cursor(ARROW);

    // 모서리 영역안에 마우스가 들어왔을때 테두리를 그려준다
    if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange) stroke(255,150,50);
    else noStroke();
    
    // 요소 그리기
    fill(127);
    ellipse(elemX, elemY, elemSize, elemSize);
    
    // 모서리 영역안에 마우스가 들어왔을때 요소 중앙에 점을 그려준다
    if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange){
        point(elemX , elemY); 
    }
}

// 마우스 버튼을 누른 순간
function mousePressed(){
    // 마우스와 요소 거리를 미리 구해놓는다
    var mouseDist = dist(mouseX, mouseY, elemX, elemY);
    
    // 요소의 영역안에 마우스가 있다면 드래그를 시작한다
    if(mouseDist < elemSize/2 - edgeRange){
        dragging = true;
    }
    
    // 모서리 영역안에 마우스가 있다면 크기조정을 시작한다
    else if(mouseDist > elemSize/2 - edgeRange && mouseDist < elemSize/2 + edgeRange){
        resizing = true;
    }
}
            
// 마우스 버튼에서 손을 땐 순간
// 드래그와 크기조정을 마친다
function mouseReleased(){
    dragging = false;
    resizing = false;
}