Question

在我的jQuery移动应用程序中，我有一个面板/导航菜单，其中包含我希望能够拖放的各种项目。我使用以下脚本来实现该结果。

<script>
$(document).bind('pageinit', function() {
    $( "#items" ).sortable();
    $( "#items" ).disableSelection();
    <!-- Refresh list to the end of sort to have a correct display -->
    $( "#items" ).bind( "sortstop", function(event, ui) {
      $('#items').button('refresh');

    });
  });
</script>

但是，这似乎只适用于桌面浏览器，因为我无法拖放到我的iPhone或Android手机上。然后我做了更多研究并发现了这个博客。

Forresst's Blog

博客告诉我，我需要利用jquery-ui-touch-punch插件在移动设备上进行拖放操作。所以我按照网站上的所有说明，仍然无法在移动设备上拖动项目。这是我的整个代码。

<!DOCTYPE html>
<html>
    <head>
        <TITLE>RAPTORS</TITLE>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Theme CSS -->
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
        <!-- Jquery -->
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <!--<script src="js/jquery.js"></script> -->
        <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
        <!-- <script src="js/jquery.mobile-1.4.0-rc.1.js"></script> -->

        <script src="jquery.ui.touch-punch.min.js"></script>
        <!-- TEST Jquery -->
        <link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
        <script type="text/javascript" src="js/jquery.countdown.js"></script>
        <!-- Style.css  -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/style1.css">
        <!-- Testing Drag -->
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
        <script src="jquery.ui.touch-punch.min.js"></script>
        <script>
            $(document).bind('pageinit', function() {
                $( "#items" ).sortable();
                $( "#items" ).disableSelection();
                <!-- Refresh list to the end of sort to have a correct display -->
                $( "#items" ).bind( "sortstop", function(event, ui) {
                    $('#items').button('refresh');
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <!-- page 1 stufff blah blah -->    
        </div>
        <!-- page 2 -->
        <div data-role="page" id="page2" class="dynPageClass">
            <div data-role="header" data-positiion="fixed">
                <a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
                <h1>HEAT</h1>
                <a data-iconpos="notext" href="#page2" data-role="button" data-icon="home" title="Home">Home</a>
            </div>
            <div data-role="content" > 
                 <ul data-role="listview" data-inset="true">
                    <li data-role="list-divider" data-theme="b">WELCOME!</li>
                    <li>Use the menu on the left to navigate <br />and configure the various options.</li>
                </ul>
            </div>
            <div data-role="panel" id="panel"  data-position="left" data-theme="a" data-display="push">
                <div>
                    <div id="nav"><h3>Navigation Menu</h3></div>
                </div>
                <div id="items" data-role="button">
                    <a href="#page3" data-theme="b" data-icon="flat-cmd" data-role="button">TEAM 1</a>
                    <a href="#page4" data-theme="b" data-icon="flat-plus" data-role="button">TEAM 2</a>
                    <a href="#page5" data-theme="b" data-icon="flat-man" data-role="button">TEAM 3</a>
                    <a href="#" data-theme="b" data-icon="flat-bubble" data-role="button">TEAM 4</a>
                    <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
                    <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="flat-cross" data-role="button">LOG OUT</a>
                </div>
            </div>
        </div>
    </body>
</html>

请指教。我做错了什么？如果这是一个糟糕的问题，我很抱歉，因为我对网络开发很陌生，而且我正在慢慢掌握基础知识。

这就是我现在所做的，努力让移动设备上的滚动条正常工作。

  <!DOCTYPE html>
  <html>
  <head>
    <TITLE>HEAT</TITLE>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Theme CSS -->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
    <!-- Jquery -->

      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <!--<script src="js/jquery.js"></script> -->
    <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
  <!-- <script src="js/jquery.mobile-1.4.0-rc.1.js"></script> -->




    <!-- TEST Jquery -->
    <link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
  <script type="text/javascript" src="js/jquery.countdown.js"></script>



    <!-- Style.css  -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style1.css">

<!-- Testing Drag -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(document).bind('pageinit', function() {
    $( "#items" ).sortable();
    $( "#items" ).disableSelection();
    // Refresh list to the end of sort to have a correct display 
      $( "#items" ).on( "sortstop", function(event, ui) {
          $('#items').listview('refresh');
    });

    $("#chkSort").on("change", function(){
        var sort = $(this).prop("checked");
        if (sort){
            $( "#items" ).sortable('enable');
        } else {
            $("#items").sortable('disable');
        }

    });
});



</script>


  </head>
  <body>

<div data-role="page" id="page1">
    <div data-role="header" data-positiion="fixed">
        <a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
        <h1>HEAT</h1>
        <a data-iconpos="notext" href="#page2" data-role="button" data-icon="home" title="Home">Home</a>
    </div>
    <div data-role="content" > 
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider" data-theme="b">WELCOME!</li>
            <li>Use the menu on the left to navigate <br />and configure the various options.</li>
        </ul>
    </div>
    <div data-role="panel" id="panel"  data-position="left" data-theme="a" data-display="push">
        <div>
            <div id="nav"><h3>Navigation Menu</h3></div>
            <label>
                <input id="chkSort" type="checkbox" checked="true"  />Allow sorting
            </label>
        </div>
        <div id="items" data-role="button">
            <a href="#page3" data-theme="b" data-icon="flat-cmd" data-role="button">TEAM 1</a>
            <a href="#page4" data-theme="b" data-icon="flat-plus" data-role="button">TEAM 2</a>
            <a href="#page5" data-theme="b" data-icon="flat-man" data-role="button">TEAM 3</a>
            <a href="#" data-theme="b" data-icon="flat-bubble" data-role="button">TEAM 4</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#" data-theme="b" data-icon="flat-volume" data-role="button">TEAM 5</a>
            <a href="#" data-theme="b" data-icon="flat-settings" data-role="button">TEAM 6</a>
            <a href="#page1" data-transition="fade" data-theme="b" data-icon="flat-cross" data-role="button">LOG OUT</a>
        </div>
    </div>
</div> 

</body>
</html>

Answer 1

你已经包括两次触碰。删除第一个。

在代码中，注释应该以// not开头

以下是适用于我的Android设备的 FIDDLE 。

$(document).on("pagecreate", function() {
    $( "#items" ).sortable();
    $( "#items" ).disableSelection();
    //Refresh list to the end of sort to have a correct display
    $( "#items" ).on( "sortstop", function(event, ui) {
          $('#items').listview('refresh');
    });
});

更新：因为列表可以比视口高度更长，所以关闭排序并允许用户通过触摸滚动是很有用的。为此，我在列表上方添加了一个复选框，用于打开和关闭排序：

$("#chkSort").on("change", function(){
    var sort = $(this).prop("checked");
    if (sort){
        $( "#items" ).sortable('enable');
    } else {
        $("#items").sortable('disable');
    }               
});

此外，我在面板上添加了一些css，使其保持100％的高度，并允许内部面板溢出以进行分类：

.ui-panel {
    bottom: 0 !important;
}
.ui-panel-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 98% !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

以下是更新的 FIDDLE

Answer 2

使用jquery-ui库进行拖动和放大可能下降。而toucpunch修复了jquery-ui与移动触摸事件http://touchpunch.furf.com/

的兼容性

我已成功使用此技术制作http://www.impresspages.org阻力＆amp;降

如何在Jquery Mobile中拖动项目

2 个答案: