반응형
How TO - Create a Draggable HTML Element
https://www.w3schools.com/howto/howto_js_draggable.asp
How To Create a Draggable HTML Element
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://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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>반응형
'프로그래밍 > Script' 카테고리의 다른 글
| [jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등) (0) | 2022.10.31 |
|---|---|
| Masonry - Cascading grid layout library (0) | 2022.10.12 |
| “제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란? (0) | 2022.10.05 |
| [React] DnD - Drag andDrop for React (0) | 2022.09.08 |
| [Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run (0) | 2022.09.07 |