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