heeestorys :: [jQueryUI] 드랍 요소 제어하기

[jQueryUI] 드랍 요소 제어하기 - droppable[accept, scope]

Front-End/jQueryUI 2017. 1. 12. 16:56

드랍 요소 제어하기 - droppable[accept, scope]

1. accept

- 특정 요소를 지정 할 수 있을 때 사용

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ border : 1px solid black; width: 100px; height:100px; display: inline-block; background-color: red; margin-left : 100px; } .drop{ border : 1px solid grey; width: 400px; height : 400px; margin-left : 100px; } </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <div id="main"> <div id="box1" class="box">Cucumber</div> <div id="box2" class="box">Apple</div> <div id="box3" class="box">PineApple</div> <hr/> <div class="drop"></div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ //드래그 $('.box').draggable(); //드롭 $('.drop').droppable({ accept : '#box1, #box2', drop:function (e, ui) { $(this).html($(this).html() + ui.draggable.text() + '들어왔습니다.<br/>'); } }); }); </script>

2. scope

- 양측의 범위값이 일치하는 것 끼리 드래그 드롭 할 수 있다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ border : 1px solid black; width: 100px; height:100px; display: inline-block; background-color: red; margin-left : 100px; } .drop{ border : 1px solid grey; width: 400px; height : 400px; margin-left : 100px; } </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <div id="main"> <div id="box1" class="box">Cucumber</div> <div id="box2" class="box">Apple</div> <div id="box3" class="box">PineApple</div> <hr/> <div class="drop"></div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ //드래그 $('#box1, #box2').draggable({ revert : true, scope:'ok' }); $('#box3').draggable({ revert:true }); //드롭 $('.drop').droppable({ scope:'ok', drop:function (e, ui) { $(this).html($(this).html() + ui.draggable.text() + '들어왔습니다.<br/>'); } }); }); </script>

- revert : true를 이용하여 드랍한 후 제자리로 간다

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0)	2017.01.16
[jQueryUI] jQueryUI 이용 방법 (0)	2017.01.16
[jQueryUI] 드래그 드랍 지정하기 - draggable(), droppable() (0)	2017.01.12
[jQueryUI] 드래그로 여러항목 선택 - selectable() (0)	2017.01.12
[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder] (0)	2017.01.12

리딩리드

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[jQueryUI] 드랍 요소 제어하기 - droppable[accept, scope]

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바