jqueryUI sortable 질문드립니다..
본문
wnghks2516.cafe24.com/testing.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 부트스트랩 3.x를 사용한다. -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
/* 리스트 css */
.column {
border: 1px solid #cecece;
padding-top: 10px;
padding-bottom: 10px;
min-height: calc(70vh);
}
.column2 {
border: 1px solid #cecece;
padding-top: 10px;
padding-bottom: 10px;
min-height: calc(70vh);
}
.container-fluid {
margin-top: 20px;
}
/* 이동 타켓 */
.card-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
margin-left: auto;
margin-right: auto;
/* 노란색으로 표신되는 것이 주요 포인트 */
background-color: yellow;
}
/* 마우스 포인터을 손가락으로 변경 */
.card:not(.no-move) .card-header {
cursor: pointer;
}
/* 부트스트랩 3.x에는 card 클래스 컴포낸트가 없으니 제가 만들었습니다. */
.card {
padding: 10px;
border-radius: 5px;
margin: 10px 0px;
}
.card-header {
border-bottom: 1px solid;
margin: 0px -10px;
padding: 5px 10px;
padding-top: 0px;
}
.no-move:hover {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<!-- 세로 리스트 박스 -->
<div class="col-sm-4 column">
<!-- 각 카드 리스트 박스 -->
<div class="card bg-primary mb-3 no-move">
<div class="card-header">Header</div>
<input type="text" name="student[]" value="card 1 "disabled="true" readonly="" style="color:#000">
<p class="card-text">no-move</p>
</div>
<!-- 각 카드 리스트 박스 -->
<div class="card text-white bg-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 2 " disabled="true" readonly="">
<p class="card-text">card 2</p>
</div>
</div>
</div>
<!-- 세로 리스트 박스 -->
<div class="col-sm-4 column2">
<div class="card text-white bg-success mb-3 no-move">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card3 "disabled="true" readonly="">
<p class="card-text">no-move</p>
</div>
</div>
</div>
<!-- 세로 리스트 박스 -->
<div class="col-sm-4 column">
<!-- 각 카드 리스트 박스 -->
<div class="card text-white bg-danger mb-3 no-move">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 4 "disabled="true" readonly="">
<p class="card-text">no-move</p>
</div>
</div>
<!-- 각 카드 리스트 박스 -->
<div class="card text-white bg-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 5 " disabled="true" readonly="">
<p class="card-text">card 5</p>
</div>
</div>
<!-- 각 카드 리스트 박스 -->
<div class="card text-white bg-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 6 "disabled="true" readonly="">
<p class="card-text">card 6</p>
</div>
</div>
<!-- 각 카드 리스트 박스 -->
<div class="card bg-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 7 " disabled="true" readonly="">
<p class="card-text">card 7</p>
</div>
</div>
<!-- 각 카드 리스트 박스 -->
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<input type="text" name="student[]" value="card 8 " readonly="" disabled="true" style="color:#000">
<p class="card-text">card 8</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- 부트스트랩 3.x를 사용한다. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".column").sortable({
// 드래그 앤 드롭 단위 css 선택자
connectWith: ".column2",
// 움직이는 css 선택자
handle: ".card-header",
// 움직이지 못하는 css 선택자
cancel: ".no-move",
// 이동하려는 location에 추가 되는 클래스
placeholder: "card-placeholder"
});
// 해당 클래스 하위의 텍스트 드래그를 막는다.
$(".column .card").disableSelection();
});
$(function() {
$(".column2").sortable({
// 드래그 앤 드롭 단위 css 선택자
connectWith: ".column",
// 움직이는 css 선택자
handle: ".card-header",
// 움직이지 못하는 css 선택자
cancel: ".no-move",
// 이동하려는 location에 추가 되는 클래스
placeholder: "card-placeholder",
change : function(event,ui){
alert($(this).html());
}
});
// 해당 클래스 하위의 텍스트 드래그를 막는다.
$(".column2 .card").disableSelection();
});
</script>
</body>
</html>
해당 코드는 드래그&드롭을 통해 각 div를 마우스를 이용하여 옮길 수 있는데
제가 이걸 입력폼에 넣고 싶어서 질문글을 올리게 되었습니다.
3개의 영역이 있고 , 가운데 영역이 오면 , input text의 disabled="false"로 바꾸고, 가운데 영역에 있는 것을 다른곳에 옮기면 다시 disabled='true'로 만들고 싶은데 어떻게 하면 되는지 알고 싶습니다.
단순하게 jqueryui 에서 제공하는 함수 중, change부분이 있는데 , 이건 가운데 영역에 집어 넣거나 , 빼는것 두개다 처리를 하기에 어떻게 처리를 해야 할 지 모르겠습니다...
답변 1
change 콜백에서
change: function( event, ui ) {
console.log(ui, this);
console.log(!!ui.sender, $(this).attr('id'));
$(this).find(':text').prop('disabled', ui.sender)
},
콘솔을 찍어보면 받는 쪽 레이어는 ui.sender 가 있는 게 확인됩니다
ui.sender 가 있는 레이어에서 모든 text 인풋박스를 찾아서 disabled true 해주고
없는 레이는 모두 disabled false 하면
되 지 않 을 까 요...
저는 주로 update 콜백을 쓰는데
change 와 다른 점은 잘 모르겠습니다
혹시 몰라 제가 테스트한 코드
공홈에 있는 샘플로 했어요;;
https://jqueryui.com/sortable/#connect-lists
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
change: function( event, ui ) {
console.log(ui, this);
console.log(!!ui.sender, $(this).attr('id'));
$(this).find(':text').prop('disabled', ui.sender)
},
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
방금 해봤는데 change는
한번 클릭 드래그해서 놓지 않고
와리가리와리가리 하면 계속 이벤트가 발생하는군요
update 콜백을 쓰는 게 좋겠네요
감사합니다!!!! 방금 응용해서 수정했는데 너무 잘되요 !!!
답변을 작성하시기 전에 로그인 해주세요.
