dragndrop.js

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

샘플영상

다운로드

dragndrop.js 다운로드

설치/사용법

<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. 옵션 설정하며, 추가 필요한 기능을 자바스크립트로 작성 합니다.

 

 

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.