지원되는 브라우저

chrome4.0+, edge9.0+, Firefox3.5+, internet Expolrer, opera7.0+, safari6.0+, samsung internet

 

객체를 다른 위치로 드래그 할 때 사용

기본적으로 텍스트 선택 영역, 이미지, 링크 외 드래그 불가능,

하지만 draggable="true" 속성을 설정할 경우 어떤 요소에서도 사용 가능하다

XUL 요소에 대해서는 draggable 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능하다

다른 요소에 드래그 앤 드롭을 적용하려면 이벤트 처리가 필요함

 

해당 속성으로(드래그 앤 드롭) 사용

- 파일 업로드

- 데이터 삭제 또는 추가

- 그 외 

 

예시

<p draggable="true">가능</p>
<!-- 요소 드래그 가능 -->
<div draggable="false">불가능</div>
<!-- 드래그 불가능 -->
<div draggable="auto">a, img 태그만 가능</div>
<!-- 브라우저의 기본 동작을 따름(href 속성이 지정된 a, src 속성이 지정된 img는 드래그 가능) -->

 

 

 

확인하기

 

가능 불가능 auto a tag auto

 

 

<script>
    // 드롭 영역
    function allowDrop(event) {
        event.preventDefault();
        // 드롭을 허용하려면 요소의 기본 처리를 방지해야함
        // 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정 
        // 기본적으로 데이터/요소는 다른 요소에 삭제할 수 없음
    }
    function drop(event) {
        event.preventDefault();
        // 기본 처리 방지를 위해 호출(기본값은 드롭 시 링크로 열려 있음)
        // 드랍 될 요소에 해당 메소드가 없을경우 브라우저에서 드랍 이벤트를 허용하지 않을 수 있음
        var data = event.dataTransfer.getData("text");
        // 드래그 한 데이터를 가져옴
        event.target.appendChild(document.getElementById(data));
        // 객체의 아이디값, 아이디값을 드롭 요소에 추가
    }
    // 개체 영역
    function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
        // 데이터의 유형과 값을 설정
        // 데이터 유형은 text, 드래그 요소의 아이디값(예시, drag1, drag2)
    }
    
</script>
<style>
  .div{
    position: relative; 
    width: 100%; height: 100%; 
    display: flex; justify-content: space-between; align-items: center; 
    margin: 0 auto;
  }
  .drag{
    display: inline-flex; align-items: center; justify-content: center; 
    background: rgba(252, 216, 213, .3); 
    width: 80px; height: 80px; 
    border-radius: 50%;
  }
</style>
<body>
  <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
    <span class="drag" id="drag1" draggable="true" ondragstart="drag(event)">가능</span> 
    <span class="drag" id="drag2" draggable="true" ondragstart="drag(event)">불가능</span> 
    <span class="drag" id="drag3" draggable="true" ondragstart="drag(event)">auto</span> 
    <a class="drag" id="drag4" href="#" draggable="true" ondragstart="drag(event)">a tag auto</a>
  </div>
</body>

 

- 드래그 할 수 있는 부분과 할 수 없는 부분으로 나누기( 드래그 할 객체, 드래그 할 객체 드랍 영역)

- 드래그 할 영역은 draggable="true" 속성 추가

- 드랍 될 영역은 event.preventDefault() 추가

- 요소에 position: absolute 있으면 안움직임

 

ondragstart();
// 사용자가 요소를 끌어 시작할 때 발생
ondrag();
// 요소가 드래그 될 때 발생
ondragend();
// 드래그가 완료되면 발생
ondragenter();
// 드래그 소자 드롭 타겟을 입력 할 때마다
ondragover();
// 드래그 요소가 드롭 영역 위에 있을 때 발생
ondrop();
// 드래그 요소가 드롭 영역내에 드롭 될 때 발생
ondragleave();
// 드래그 요소가 드롭 대상을 떠날 때 발생

 

 

좀더 자연스럽게 원하는 위치에 옮기기

- jquery ui 를 써야하나본디,, 

 

 

 

 

참고

https://gahyun-web-diary.tistory.com/21

 

[JAVASCRIPT/JQUERY] Jquery UI (draggable/droppable)옵션설정하기

https://jqueryui.com jQuery UI를 쓰기 위해서는 다음과 같은 js 파일이 필요하다. //jQuery버전맞추기 https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js //jQuery UI http://code.jquery.com..

gahyun-web-diary.tistory.com

https://shxrecord.tistory.com/165

 

[jQuery UI]드래그 기능

화면 개발을 주로 jQuery를 이용해서 했었는데 얼마 전 jQuery UI란 것을 알게 되었습니다. jQuery UI는 드래그, 드롭, 리사이즈 등 다양한 기능뿐 아니라 CSS를 이용하여 UI를 손쉽게 구현할 수 있도록

shxrecord.tistory.com

 

event.preventDefault();

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

 

Event.preventDefault() - Web API | MDN

Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

developer.mozilla.org

 

http://www.w3bai.com/ko/html/html5_draganddrop.html

 

HTML5의 드래그 앤 드롭

드래그 앤 드롭은 HTML5 표준의 일부입니다. 직사각형으로 상기 이미지를 드래그. HTML에서 HTML5의 작업 초안 사양은 드래그 앤 드롭을 지원합니다. HTML5는 드래그 기능을 포함하여 낙하의 다른 종

www.w3bai.com

 

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

 

Drag Operations - Web API | MDN

다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.

developer.mozilla.org

 

html 드래그 앤 드롭 api

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

 

HTML 드래그 앤 드롭 API - Web API | MDN

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다.

developer.mozilla.org

 

https://www.w3schools.com/html/html5_draganddrop.asp

 

HTML Drag and Drop API

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://webisfree.com/2019-11-22/html5%EC%9D%98-%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%9E%8D-%EA%B5%AC%ED%98%84-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-drag-and-drop

 

HTML5의 드래그앤드랍 구현 방법 및 예제, Drag and Drop

HTML5, 자바스크립트를 사용하여 드래그앤드랍(Drag and Drop)을 구현하는 방법에 대하여 알아봅니다.

webisfree.com

 

https://jqueryui.com/draggable/

 

Draggable | jQuery UI

Draggable Allow elements to be moved using the mouse. Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

jqueryui.com

 

https://api.jqueryui.com/draggable/#event-drag

 

Draggable Widget | jQuery UI API Documentation

Description: Allow elements to be moved using the mouse. Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. Theming The draggable widge

api.jqueryui.com

 

저작자표시 비영리 변경금지

'개발 > html & CSS' 카테고리의 다른 글

meta tag  (0) 2022.01.26
코드펜(Codepen) 소스코드 티스토리 올리기  (0) 2022.01.14
[CSS] -webkit-tap-highlight-color 알아보기!  (0) 2021.12.22
[CSS] clip 알아보기!  (0) 2021.12.10

+ Recent posts

티스토리툴바