Javascript 如何在Jquery Mobile中拖动项目_Javascript_Jquery_Html_Jquery Mobile

Javascript 如何在Jquery Mobile中拖动项目

javascript jquery html jquery-mobile

Javascript 如何在Jquery Mobile中拖动项目,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,在我的jQuery移动应用程序中，我有一个面板/导航菜单，其中包含我希望能够拖放的各种项目。我使用了下面的脚本来实现这个结果 <script> $(document).bind('pageinit', function() { $( "#items" ).sortable(); $( "#items" ).disableSelection(); <!-- Refresh list to the end of sort to have a correct

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


$（document）.bind（'pageinit'，function（）{
$（“#项”）.sortable（）；
$（“#项”）.disableSelection（）；
$（“#items”）.bind（“sortstop”，函数（事件，用户界面）{
$（“#项”）。按钮（“刷新”）；
});
});

然而，这似乎只适用于桌面浏览器，因为我不能在iPhone或Android手机上拖放。然后我做了更多的研究，发现了这个博客

博客告诉我，我需要利用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>


猛禽
$（document）.bind（'pageinit'，function（）{
$（“#项”）.sortable（）；
$（“#项”）.disableSelection（）；
$（“#items”）.bind（“sortstop”，函数（事件，用户界面）{
$（“#项”）。按钮（“刷新”）；
});
});
热度

欢迎光临
使用左侧的菜单导航
并配置各种选项

导航菜单

请给我一些建议。我做错了什么？如果这是一个糟糕的问题，我很抱歉，因为我对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>


热度
$（document）.bind（'pageinit'，function（）{
$（“#项”）.sortable（）；
$（“#项”）.disableSelection（）；
//将列表刷新到排序的末尾，以获得正确的显示
$（“#项”）。在（“sortstop”上，函数（事件，用户界面）{
$（'#items'）。列表视图（'刷新'）；
});
$（“#chkSort”）。关于（“更改”，函数（）{
var sort=$（this.prop（“选中”）；
如果（排序）{
$（“#项”）。可排序（'enable'）；
}否则{
$（“#项”）。可排序（'disable'）；
}
});
});
热度

欢迎光临
使用左侧的菜单导航
并配置各种选项

导航菜单
允许排序

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

在代码中，注释应以//not开头这是一个在我的Android设备上运行的

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

$("#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;
}

以下是更新后的

使用jQueryUI库，它使拖放成为可能。以及toucpunch，它修复了jquery ui，使其与移动触摸事件兼容

我已成功地使用此技术进行拖放

您已包含两次触摸打孔。移除第一个。在代码中，注释应该以//开头，而不是在面板中添加一些css以允许在面板内容上滚动。在我的android设备上工作…使用发布的jQM 1.4而不是alpha版本。面板CSS在哪里。ui面板{bottom:0！important；}.ui面板内部{padding top:0！important；padding bottom:0！important；height:98%！important；overflow:auto；-webkit overflow scrolling:touch；}调整左填充和右填充以获得所需内容。感谢您的建议。这个问题太复杂了。答案也会变得过于复杂。让我们保持小规模。如果你喜欢那些“肥胖”的答案，请投票表决。我喜欢专业和精确的解决方案，不需要什么。。。

.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;
}