# download : http://touchpunch.furf.com/
jsfiddler : https://jsfiddle.net/softm/a0Lkfc8c/1/
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>TEST sortable</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <style> .clear_fix:after {content:"";display:block;clear:both;visibility:hidden;font-size:0;width:0;height:0} .left{width:25%; float:left;} ol,ul{list-style-type:none;} .container02{width:100%; padding:20px 0; background:#eee;} .container02 .box{width:89%; margin:0 auto; border-top:1px solid #cfcfcf;} .container02 .box ul li{border-bottom:1px solid #cfcfcf; padding:10px 10px; background:#fff;} .container02 .box .left{float:left; width:59%; } .container02 .box .left p{float:left;} .container02 .box .left .icon01{width:18%;} .container02 .box .left .text{ font-size:1.50em; padding:7px 0 0 7px; font-family:"NanumBarunGothic"; letter-spacing:-2px; } .container02 .box .right{float:right; width:39%;} .container02 .box .right p{float:left; padding-top:5px;} .container02 .box .right .use01{width:42.13%; padding-right:6px;} .container02 .box .right .use02{width:51.77%;} </style> <script src="jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(e) {
// html5 mobile able. $( "#sortable" ).sortable({ items: "li:not(.ui-li-divider)" //items: ">li" ,scroll:true ,handle: ".icon01" //,appendTo: document.body //,cancel: "p,a,.use01,.use02" //items: "li img" }); $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); $( "#sortable" ).bind( "sortstop", function(event, ui) { //alert("정룔 처리실11행."); // $('#sortable').listview('refresh'); });
// html5 only. $('li').removeClass('ui-corner-bottom'); $('ul') .addClass('ui-corner-top') .removeClass('ui-corner-all') .sortable({ 'containment': 'parent', 'opacity': 0.6, update: function(event, ui) { alert("dropped"); } }); }); //--> </script> 1. jQuery UI Touch Punch mobile Touch Event. site : http://touchpunch.furf.com/ <div class="container02" id="LblockContent"> <div class="box"> <ul id="sortable"> <li class="clear_fix"> <div class="left clear_fix"> <p class="icon01"><img src="https://t1.daumcdn.net/cfile/tistory/214ACE3956E903A620"/></p> <p class="text"><a href="">TEST01</a></p> </div> </li> <li class="clear_fix"> <div class="left clear_fix"> <p class="icon01"><img src="https://t1.daumcdn.net/cfile/tistory/214A0D3F56E903A618"/></p> <p class="text"><a href="">TEST02</a></p> </div> </li> <li class="clear_fix"> <div class="left clear_fix"> <p class="icon01"><img src="https://t1.daumcdn.net/cfile/tistory/2539423556E903A703"/></p> <p class="text"><a href="">TEST03</a></p> </div> </li> <li class="clear_fix"> <div class="left clear_fix"> <p class="icon01"><img src="https://t1.daumcdn.net/cfile/tistory/267F463856E903A701"/></p> <p class="text"><a href="">TEST04</a></p> </div> </li> </ul> </div> </div> 2. Jquery UI sortable을 이용한 방법. site : http://jqueryui.com/sortable/ <div id="page1"> <div data-role="content"> <ul data-role="listview" data-divider-theme="b" data-inset="true"> <li data-role="list-divider" role="heading">Re-order</li> <li data-theme="c">1</li> <li data-theme="c">2</li> <li data-theme="c">3</li> <li data-theme="c">4</li> <li data-theme="c">5</li> <li data-theme="c">6</li> <li data-theme="c">7</li> </ul> <a data-role="button">Submit</a> </div> </div> </body> </html>
jq_sortable.zip'web > javascript' 카테고리의 다른 글
| javascript ajax 크로스 도메인 요청 하기 (CORS) (0) | 2015.10.08 |
|---|---|
| press [key enter] to event trigger & work template (0) | 2015.08.21 |
| reset form element for jquery (0) | 2015.08.18 |
| 월더하기 (0) | 2015.08.18 |
| jquery toast (0) | 2015.04.08 |
댓글