Drag and drop inside a mobile view

5 posts, 0 answers
  1. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 14 May 2012 Link to this post

    Inside mobile views controlled by a tab bar. I have been unable to make drag and drop work. As soon as I remove all the mobile views drag and drop works. Is this a feature or am I missing something?

    Thanks/Anker
  2. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 14 May 2012 Link to this post

    Here's some more information:

    The following works because it is not a tabstrip view:

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
        <title>Test</title>
        <!--Kendo UI, Mobile and DataViz-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
        <script src="js/kendo.custom.min.js" type="text/javascript"></script>
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <style type="text/css">
          .km-login
          {
          -webkit-mask-box-image: url("images/Logout.png");
          }
        </style>
      </head>
      <body>
        <div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
        >
          <div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
        </div>
        <script type="text/javascript">
          $(document).ready(
            function () {
              var app = new kendo.mobile.Application(document.body);
              $("#Test").kendoDraggable(
                {
                hint: function () {
                  return $("#Test").clone();
                }
              }
                );
            }
            )
        </script>
      </body>
    </html>

    If modify it to a tabstrip view like this:

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
        <title>Test</title>
        <!--Kendo UI, Mobile and DataViz-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
        <script src="js/kendo.custom.min.js" type="text/javascript"></script>
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <style type="text/css">
          .km-login
          {
          -webkit-mask-box-image: url("images/Logout.png");
          }
        </style>
      </head>
      <body>
        <div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
          id="tabstrip-home" data-layout="mobile-tabstrip"
        >
          <div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
        </div>
        <div data-role="layout" data-id="mobile-tabstrip">
          <div data-role="header"></div>

          <p>TabStrip</p>
          <div data-role="footer">
            <div data-role="tabstrip" id="TabStrip">
              <a id="HomeTab" href="#tabstrip-home" data-icon="home">Home</a>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          $(document).ready(
            function () {
              var app = new kendo.mobile.Application(document.body);
              $("#Test").kendoDraggable(
                {
                hint: function () {
                  return $("#Test").clone();
                }
              }
                );
            }
            )
        </script>
      </body>
    </html>

    Then it doesn't.

    Anker
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 15 May 2012 Link to this post

    Hello,

    Thanks for contacting us. In the official release, the draggable widget does not work when in mobile applications. This is a known issue, which is resolved in the latest internal builds. Can you please try using an internal build?  

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Simon
    Simon avatar
    1 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 in reply to Petyo Link to this post

    Dear Petyo,

    this post was published in 2012. Is this feature now available?

    thank you
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 05 Feb 2014 Link to this post

    Hello Simon,

    As my colleague Petyo stated, the issue was resolved in an internal build long time ago. This means the fix should be present in consecutive releases, including the latest 2013.3.1324 version.

    Regards,
    Sebastian
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready