移動端常用JS插件（持續更新中）

自由拖曳插件
draggabilly、Tdrag(很多自由拖曳或者拖曳排序插件都是基於jQuery-ui的draggable功能進行開發的，功能大同小異，draggabilly移動端和PC端都兼容，Tdrag不支持移動端)

1. 滾動加載插件（上拉加載、下拉刷新）- mescroll.js(https://github.com/mescroll/mescroll)

<link rel="stylesheet" href="mescroll.css">
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪
    //列表內容,如:<ul>列表數據</ul> ...
</div>
<script src="mescroll.js"></script>
<script>
    var mescroll = new MeScroll("mescroll", { //第一個參數"mescroll"對應上面佈局結構div的id
    //如果您的下拉刷新是重置列表數據,那麼down完全可以不用配置,具體用法參考第一個基礎案例
    //解析: down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback
    down: {
        callback: downCallback //下拉刷新的回調
    },
    up: {
        callback: upCallback //上拉加載的回調
    }
});
//下拉刷新的回調
function downCallback() {
    $.ajax({
        url: 'xxxxxx',
        success: function(data) {
            //聯網成功的回調,隱藏下拉刷新的狀態;
            mescroll.endSuccess(); //無參
            //設置數據
            //setXxxx(data);//自行實現 TODO
        },
        error: function(data) {
            //聯網失敗的回調,隱藏下拉刷新的狀態
            mescroll.endErr();
        }
    });
}

//上拉加載的回調 page = {num:1, size:10}; num:當前頁 默認從1開始, size:每頁數據條數,默認10
function upCallback(page) {
    $.ajax({
        url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num從0開始 ?
        success: function(data) {
            //聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
            //參數data.length:當前頁的數據總數
            //mescroll會根據data.length自動判斷列表如果無任何數據,則提示空,顯示empty配置的內容;
            //列表如果無下一頁數據,則提示無更多數據;
            //如果不傳data.length,則僅隱藏下拉刷新和上拉加載的狀態
            mescroll.endSuccess(data.length);
            //設置列表數據
            //setListData(data);//自行實現 TODO
        },
        error: function(e) {
            //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態
            mescroll.endErr();
        }
    });
}
</script>

1. 自由拖曳插件-draggabilly.pkgd.min.js（https://github.com/desandro/draggabilly）

var $draggable = $('.draggable').draggabilly({
  // options...
})

3.Mobiscroll is a collection of UI controls for making amazing apps and websites(功能強大的UI控件，比如calendar、color、data&time、forms、images、number、range等)-Mobiscroll.js(http://www.jq22.com/jquery-info10900)

html:<input type="text" id="demo">
$('#demo').mobiscroll().calendar({
       theme: 'mobiscroll',
       lang: 'zh',
       display: 'bottom',
       select: 'multiple',
       controls: ['calendar'],
});

4.移動端觸摸滑動插件（觸屏焦點圖、觸屏Tab切換、觸屏多圖切換）- swiper.min.js(http://www.swiper.com.cn/)

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滾動條 -->
    <div class="swiper-scrollbar"></div>
</div>
//導航等組件可以放在container之外
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分頁器
    pagination: '.swiper-pagination',

    // 如果需要前進後退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滾動條
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>

5.JavaScript image gallery for mobile and desktop.（圖片畫廊）- photoswipe.min.js（https://github.com/dimsemenov/photoswipe）

6.複製插件（一鍵複製）- clipboard.js（https://github.com/zenorocha/clipboard.js/）

持續更新中…