워크식스

2017 ⓒ 워크식스.

dragndrop.js

마우스로 클릭 드래그하여 반대편 영역으로 드롭 하는 기능을 구현한 플러그인

샘플영상

다운로드

dragndrop.js V1.0 다운로드

설치/사용법

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

<script>
   $(function(){
       $('#dragndroplist1').dragndrop({
           secondAra:'#dragndroplist2',
           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>

1. 제이쿼리 설치가 필요 합니다.

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

<script>
   $(function(){
       $('#dragndroplist1').dragndrop({
           secondAra:'#dragndroplist2',
           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>

2. 다운로드 받은 플러그인을 설치 합니다.

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

<script>
   $(function(){
       $('#dragndroplist1').dragndrop({
           secondAra:'#dragndroplist2',
           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>

3. 위 기본 구조를 가지고 엘리먼트를 작성 합니다.

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

<script>
   $(function(){
       $('#dragndroplist1').dragndrop({
           secondAra:'#dragndroplist2',
           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>

4. 페이지가 열릴때 자동으로 함수가 실행되도록 작성 합니다.

$('#dragndroplist1').dragndrop({
           secondAra:'#dragndroplist2', //두번째 영역의 아이디를 설정 합니다.
           success:function(res){

           } //엘리먼트(요소)가 이동 후 처리를 작성합니다.
});

5. 옵션 설정하며, 추가 필요한 기능을 자바스크립트로 작성 합니다.

* 플러그인 설치는 지원하지는 않습니다.

← 뒤로

위로

잠시만 기다려주세요.