This is a migrated thread and some comments may be shown as answers.

Drag and drop inside a mobile view

4 Answers 123 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Anker Berg-Sonne
Top achievements
Rank 1
Anker Berg-Sonne asked on 14 May 2012, 04:15 PM
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

4 Answers, 1 is accepted

Sort by
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 14 May 2012, 06:46 PM
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
0
Petyo
Telerik team
answered on 15 May 2012, 08:50 AM
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!
0
Simon
Top achievements
Rank 1
answered on 05 Feb 2014, 12:34 AM
Dear Petyo,

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

thank you
0
Sebastian
Telerik team
answered on 05 Feb 2014, 01:01 PM
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!
Tags
Drag and Drop
Asked by
Anker Berg-Sonne
Top achievements
Rank 1
Answers by
Anker Berg-Sonne
Top achievements
Rank 1
Petyo
Telerik team
Simon
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or