그냥 개발자 블로그

드래그앤드롭 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

드래그앤드롭 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 20:36

레시피 사이트였는데 고객들이 레시피를 보다가


레시피에 나오는 상품들을 드래그앤드롭해서 상품을 담았다가


한번에 구매하는 기능을 구현했었죠.


그중에서 가장 오래 시간이 걸리고 머리 아프게 했던 부분이 


제이쿼리(jquery)로 드래그앤드롭 하는거였는데요.


해당 기능을 2년이 지난 지금에서야 제이쿼리(jquery) 플러그인화했어요.


아래 영상으로 보시면 어떠한 동작인지 더 이해가 빠르실꺼에요.








마우스를 선택한 요소를 클릭한 상태에서 반대편 박스안으로 가져가면


이동되는걸 보실수 있으실꺼에요.


그렇다면 예제를 한번 보실까요?





 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="dragndrop.js"></script>


<script>

$(function(){

$('#dragndroplist1').dragndrop({

secondAra:'#dragndroplist1',

success:function(res){

}

});

});

</script>


<body>

<div id="dragndroplist1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ul>

</div>

<div id="dragndroplist2">

<ul>

<li>a1</li>

<li>a2</li>

<li>a3</li>

<li>a4</li>

<li>a5</li>

<li>a6</li>

<li>a7</li>

<li>a8</li>

</ul>

</div>

</body> 

 


먼저 제이쿼리(jquery) 플러그인을 사용하기 위해서는 


위와 같은 구조의 html 이 필요하고요.


id는 서로다르면 어떤것을 해도 상관없어요.




 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="dragndrop.js"></script>


<script>

$(function(){

$('#dragndroplist1').dragndrop({

secondAra:'#dragndroplist1',

success:function(res){

}

});

});

</script>


<body>

<div id="dragndroplist1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ul>

</div>

<div id="dragndroplist2">

<ul>

<li>a1</li>

<li>a2</li>

<li>a3</li>

<li>a4</li>

<li>a5</li>

<li>a6</li>

<li>a7</li>

<li>a8</li>

</ul>

</div>

</body> 




다음으로 dragndrop.js 제이쿼리(jquery) 플러그인을 연결해주시고요.





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="dragndrop.js"></script>


<script>

$(function(){

$('#dragndroplist1').dragndrop({

secondAra:'#dragndroplist1',

success:function(res){

}

});

});

</script>


<body>

<div id="dragndroplist1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ul>

</div>

<div id="dragndroplist2">

<ul>

<li>a1</li>

<li>a2</li>

<li>a3</li>

<li>a4</li>

<li>a5</li>

<li>a6</li>

<li>a7</li>

<li>a8</li>

</ul>

</div>

</body> 




다음과 같이 document가 로딩이 완료되는 시점에 작성해주세요.


옵션은 두가지가 있는데 설명은 다음과 같아요.


secondArea : 다른 하나의 엘리먼트 아이디 또는 클래스, 필수항목

success : 리스트중 요소를 옮기는데 성공하면 동작할 함수, 원하는대로 작성, res는 옮겨진 li의 정보가 들어있음






해당 제이쿼리(jquery) 플러그인을 이용해보고 싶은분들은


워크식스에서 공유하고 있으니


다운받아서 이용하시면 되시고요.






저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

간단한 제이쿼리(jquery) 슬라이드 플러그인 공유  (19) 2015.09.21
모바일웹에서 싸인을 받을수 있을까? 제이쿼리(jquery)  (1) 2015.09.21
모바일용 회전메뉴 제이쿼리(jquery) 플러그인  (0) 2015.09.21
공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more