<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drag test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<style>
div.post {
float:left;
width:150px;
height:150px;
padding:10px 0px 0px 20px;
background-color:#f9d716;
border:1px solid black;
box-shadow:2px 2px 2px;
}
div.color {
background-color:salmon;
}
</style>
</head>
<body translate="no">
<div class="post">
<p>hello</p>
</div>
<div class="post">
<p>Lorem ipsum dolor <br /> sit amet, consecteturlit. Aenean</p>
</div>
<div class="post">
<p>Drag me</p>
</div>
<div class="post">
<p>What a Wonderful</p>
</div>
<script id="rendered-js">
$(".post").draggable({
cursor: "move",
stack: ".post",
opacity: 0.8 });
$(".post").bind("dragstart", function (event, ui) {
$(this).addClass("color"); //bgi 체인지
});
$(".post").bind("dragstop", function (event, ui) {
$(this).removeClass("color"); //bgi 체인지
});
//# sourceURL=pen.js
</script>
</body>
</html>
https://opentutorials.org/module/2675/16641
drag & drop 포스트잇 - 제이쿼리 ( JQuery ) 예제
코드펜 https://codepen.io/gamza/pen/NgyMaj ▣ 구상 - 드래그로 이동 가능한 포스트잇을 만듭니다. - 드래그 중인 요소의 색상을 구별합니다. - 가장 나중에 드래그된 요소를 상위로 보이게 합니다. ▣ 조건 ➊ 컨텐츠 ➋ 드래그 기능 ➌ 색상 변화 ➍ stack ( 나중에 드래그된 요소를 화면의 최상위로 ) ▣ 준비 · 컨텐츠에 들어갈 이미지 1장 · 드래그 기능을 사용하기 위해서 jque
opentutorials.org
https://www.elated.com/drag-and-drop-with-jquery-your-essential-guide/
Drag-and-Drop with jQuery: Your Essential Guide
Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.
www.elated.com
'[ Web 관련 ] > jQuery ' 카테고리의 다른 글
| 제이쿼리 기본 datepicker 사용 (0) | 2019.10.22 |
|---|---|
| 체크박스 모두 체크, 라디오박스 선택 등 (0) | 2019.10.17 |
| CSS의 다양한 에니메이션 플러그인 (0) | 2019.07.29 |
| 데이터 시각화 라이브러리 모음 (링크) (0) | 2019.07.24 |
| FAQ등에 사용할만한 템플릿 (0) | 2019.07.24 |
