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

I cant get swipe / drag to work

3 Answers 168 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 25 Jan 2013, 10:14 AM
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.

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 25 Jan 2013, 02:06 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andreas
Top achievements
Rank 1
answered on 25 Jan 2013, 02:36 PM
// 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.
0
Petyo
Telerik team
answered on 26 Jan 2013, 12:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Andreas
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Andreas
Top achievements
Rank 1
Share this question
or