I cant get swipe / drag to work

[Andreas]

I cant get swipe / drag to work. Development software:
- Windows 7 profesional
- Icenium Graphite Editor, project name: cross-plattform Device Application (Kendo UI Mobile)
- Cordova.js
- jQuery 1.8.2
- Kendo UI Mobile v2012.3.1114
- Icenium Graphite Simulator
- iPhone 4


I'am trying to follow this example to the letter.
http://demos.kendoui.com/mobile/touch/index.html
The example is working fine on your site but not when I run it in the simulator nor in an iPhone 4.

Here is something I have noticed
- In your example you dont close the div tag with data-role="view".
- In your example you are using kendo.all.js. I'am using kendo.mobile.min.js
- I cant use kendoConsole.log (not defined), so I use console.log instead.


Like your example, my debugger registers: touch start, tap, swipe right and swipe left - but not swipe down. Why not swipe down?

Unlike your example, my black div with white text (touchSurface) does not move up and down.


Basicly, overall, what I want to do is this
I want to have two areas. Area A should be about a quarter of the size of Area B. Area B should have a higher z-index than Area A, covering it. Area B should be dragable on the x-axis and when draged to the right Area A should be visible under it. 

Can you point me in the right direction? Preferebly with code examples. Iam pretty new to this.

[Petyo]

Hi Andreas,

As described in our documentation, swipe events are aimed at recognising horizontal swipe actions. In general, iOS applications scroll (or perform bounce scrolling) on vertical drag actions, so vertical swipes are not widely adopted as gestures handled by applications. 

It seems like the draggable widget is a suitable component for your requirements - please check the demos (which feature code samples - click the HTML link below each demo) and the documentation. 

Hope this helps,
Petyo
the Telerik team

[Andreas]

// Mark up
<div data-role="view" data-title="Drag events">
         <div id="dragDiv">
             Drag me
         </div>
 </div>

// Script (same document, right under the mark up)
<script>
        $(document).ready(function() {
            $("#dragDiv").kendoDraggable({cursorOffset: {top: 10, left: 10}});
        });
</script>

// CSS (Linked in from external css file)
#dragDiv{
    width:200px;
    height:200px;
    border:1px solid black;
}

Is it supposed to work like that? I cant drag the div in the Graphite simulator.

[Petyo]

Hello Andreas,

You have to define a hint configuration option. Please take a look at the demo I mentioned in my previous post, as well as the documentation which describes the widget specifics in details. 

If you still face troubles with your project implementation, you may consider contacting our premium services, which specialise in consulting and training. 

Thank you,
Petyo
the Telerik team