CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
user1010101
user1010101

Reputation: 1658

How to drag items in Jquery Mobile

In my jQuery mobile app I have a panel / navigation menu that contains various items I want to be able to drag and drop. I used the following script to achieve that result.

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

However, this only seems to work on desktop browser because I can't drag and drop on my iPhone or Android phone. Then I did more research and came across this blog.

Forresst's Blog

Blog told me i needed to utilize jquery-ui-touch-punch plugin to make the drag and drop work on mobile devices. So i followed all the instructions on the site and still was not able to get the items to drag on mobile devices. Here is my entire code.

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

Please advice. What have i done wrong? I apologize if its a bad question as i am very new to web development and i am slowly getting the hang of the basics.

This is what i got right now, struggling to get the scroller on mobile device working.

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

Upvotes: 1

Views: 3449

Answers (2)

ezanker
ezanker

Reputation: 24738

You have included touch-punch twice. Remove the first one.

In the code the comment should start with // not

Here is a FIDDLE that works on my Android device.

$(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');
    });
});

UPDATE: Because the list can be longer then the viewport height it is useful to turn off sorting and allow the user to scroll via touch. For this I added a checkbox above the list that toggles on and off the sorting:

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

In addition I added some css to the panel to keep it at 100% height and allow the inner panel to overflow for sorting:

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

Here is the updated FIDDLE

Upvotes: 3

Mangirdas Skripka
Mangirdas Skripka

Reputation: 1647

Use jquery-ui library which makes drag & drop possible. And toucpunch which fixes jquery-ui to be compatible with mobile touch events http://touchpunch.furf.com/

I have successfully used this technique to make http://www.impresspages.org drag & drop

Upvotes: 0

Related Questions