draggable 2

[HTML5] 드래그 앤 드롭(Drag and Drop) - 리스트 순서 변경

drag and drop 이벤트 - dragStart dragStart 이벤트는 드래그 작업이 시작될 때 발생합니다. 요소가 드래그되고 있는 동안 한 번만 발생합니다. 주로 이 이벤트를 사용하여 드래그 데이터를 설정하고, 드래그 중인 요소의 스타일을 변경하거나 사용자 지정 드래그 피드백을 제공하는 데 사용됩니다. - dragEnter dragEnter 이벤트는 드래그된 요소가 들어갈 수 있는 다른 요소 위로 이동할 때 발생합니다. 주로 이 이벤트를 사용하여 드롭 대상 요소에 대한 피드백을 제공하거나 드래그된 요소가 들어갈 수 있는 영역을 하이라이트하는 데 사용됩니다. - dragLeave dragLeave 이벤트는 드래그된 요소가 들어갈 수 있는 영역에서 떠날 때 발생합니다. 주로 이 이벤트를 사용하여 ..

Frontend/html 2023.09.05

[JavaScript] draggable 옵션 및 예제

자바스크립트의 draggable 속성과 dragstart, dragend 이벤트를 사용하여 요소를 드래그할 수 있습니다. draggable 옵션입니다. cancel: false는 드래그 가능한 요소 내의 특정 하위 요소를 클릭하여 드래그 작업이 취소되는 것을 방지합니다. 불투명도: 0.7은 드래그 동작 중 드래그 가능 요소의 불투명도를 설정합니다. snap: "[elem]"은 요소를 요소 클래스가 있는 다른 요소로 스냅하도록 지정합니다. snapMode: "둘 다"는 스냅이 수평과 수직 모두에서 발생해야 함을 나타냅니다. snap Tolerance: 10은 스냅이 발생해야 하는 스냅 대상으로부터의 거리(픽셀)를 지정합니다. stack: "[elem]"은 끌어온 요소의 z-index를 요소 클래스가 있는 ..

Frontend/javaScript 2023.05.04