如何在 Jquery Mobile 中拖动项目答案

【问题标题】：How to drag items in Jquery Mobile如何在 Jquery Mobile 中拖动项目
【发布时间】：2014-02-05 15:15:07
【问题描述】：

在我的 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>

请指教。我做错了什么？如果这是一个不好的问题，我深表歉意，因为我对 Web 开发非常陌生，而且我正在慢慢掌握基础知识。

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

  <!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>

【问题讨论】：

你已经包含了两次触摸打孔。删除第一个。在代码中，注释应该以 // 而不是

标签： javascript jquery html jquery-mobile

【解决方案1】：

您已经包含了两次触摸打孔。删除第一个。

在代码中，注释应该以 // 开头，而不是

这是一个可以在我的 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

【讨论】：

【解决方案2】：

使用 jquery-ui 库，使拖放成为可能。以及修复 jquery-ui 以兼容移动触摸事件的 touchpunch http://touchpunch.furf.com/

我已经成功地使用了这种技术来使http://www.impresspages.org拖放

【讨论】：

感谢您的建议。这个问题过于复杂。答案也会变得过于复杂。让我们保持小。如果您喜欢那些“胖”的答案，请给他们投票。我喜欢没有bla bla bla bla bla bla的专业和精确的解决方案......