Solved

Assistance with touchstart,touchend,touchmove

Posted on 2014-12-03
8
113 Views
Last Modified: 2014-12-14
Hi

I need some assistance in getting my code to work the way i need it to work

I have a Javascript grid which i am able to draw on, i have got the code to work on the desktop but cant seem to get it to work on mobile and tablets

What the code does is it creates a div which holds the grid and allows you to draw a rectangle/square based on the blocks in the grid

here is my code

Css
.grid {
    margin: 0px auto auto;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    background-color: #CCC;
    position: relative;
}

.grid div {
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    float: left;
}

#selectionBox {
    position: absolute;
    z-index: 3;
    display: none;
    background-color: red;
    width: 10px;
    height: 10px;
    
}

Open in new window


Javascript
function creategrid(size){
    
    var standardW = Math.floor((500) / size),
        standardH = Math.floor((500) / size);
    
    var standard = document.createElement('div');
    standard.id = 'grid';
    standard.className = 'grid';
    standard.style.width = (standardW * size) + 'px';
    standard.style.height = (standardH * size) + 'px';
    
    for (var i = 0; i < standardH; i++) {
        for (var p = 0; p < standardW; p++) {
            var cell = document.createElement('div');
            cell.style.height = (size - 1) + 'px';
            cell.style.width = (size - 1) + 'px';
            cell.style.position = 'relative';
            cell.style.zIndex= '2';
            standard.appendChild(cell);
        }
    }
    
    document.body.appendChild(standard);
}



var isDragging = false,
    dragStart,
    cellSpacing = 10,
    gridOffset,
    selectionBox;

function getMousePos (e) {
    return {
        'left': Math.floor((e.pageX - gridOffset.left) / cellSpacing) * cellSpacing,
        'top': Math.floor((e.pageY - gridOffset.top) / cellSpacing) * cellSpacing
    };
}

$(document).ready(function(){
    creategrid(10);
    gridOffset = $('#grid').offset();
    selectionBox = $('<div>').attr({id: 'selectionBox'})
      .appendTo($('#grid'));
    
    $('#grid').on('mousedown touchstart', function(e){
             
        isDragging = true;
        
        var pos = getMousePos(e);
        dragStart = pos;
        selectionBox.css({
            left: pos.left,
            top: pos.top,
            width: 10,
            height: 10
        }).show();
    });
    
    $('#grid').on('mouseup touchend', function(e){
        isDragging = false;
    });
    
    $('#grid').on('mousemove touchmove', function(e){
        if(!isDragging)
            return false;
        
        var pos = getMousePos(e);
        var diff = {
            'left': pos.left - dragStart.left,
            'top': pos.top - dragStart.top
        };
        if(diff.left > 0 && diff.top > 0){
            selectionBox.css({
                width: diff.left,
                height: diff.top
            });
        }
    });
});

Open in new window


Please could you assist me in this issue.
0
Comment
Question by:EasyToHelp
  • 4
  • 3
8 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40479440
Have you considered using the jquery mobile framework?  It would be better suited to this
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40481394
greetings EasyToHelp, , The javascript display events for "Touch" and for "Mouse" are necessarily done in a different pass to system "bubble" sequence. Because you Can NOT scroll a web page with a mouse, by holding right button down and moving mouse. I have not had very good luck with trying to do "drag" with touch on mobil displays. Because in Touch screen you scroll the page by dragging finger on it. SO you need to STOP the javascript from passing the touch event to the system and doing the default (scroll, hold touch menu), sometimes this can be accomplished by including the  event.preventDefault();   line in the touch event. Although, many browsers in older Android versions (2.3) can seem to get "mixed up" as to doing several touch events in a row, where event.preventDefault(); is added to all events.

you can look at this page for Information about using mobil (or windows 8) touch events -
       http://www.javascriptkit.com/javatutors/touchevents.shtml

But there are some unusual things that different mobil browsers do on some things sometimes. Do a web search for "javascript touch events" or "javascript touch bubble" to get many other informations.
0
 

Author Comment

by:EasyToHelp
ID: 40486589
Do you think it is possible to create a jquery Selectable on mobile?
http://jqueryui.com/selectable/#display-grid
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 34

Expert Comment

by:Slick812
ID: 40487441
???
can a "jquery Selectable on mobile" be done?
I do not know about that, one could say that anything is possible?
I do not ever use jquery if I can avoid it, however millions do use it, and there is a very active jquery USER forum at -
      http://forum.jquery.com/using-jquery-ui
with many answers and questions, you may can find some help there.
Also for many, many of the jquery add-ons like "selectable" , you may can get in touch with the developers by email for "help", , OR there is a place to ask questions, or a separate forum for that add-on.

As I said though, you may need to "NOT" think of the finger drag on mobil as the same as the hold mouse button drag, because the "system" operations for touch, outside of javascript, are from necessity, different than using a mouse for movement.
Sorry , I do not know a way to do that.
0
 

Author Comment

by:EasyToHelp
ID: 40488281
Thanks Slick
0
 

Accepted Solution

by:
EasyToHelp earned 0 total points
ID: 40490613
@slick i have found some code that may be useful check this out http://touchpunch.furf.com/
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40494407
Thanks , I looked at the code in that touchpunch, I had never thought of completely "Hijacking" the touch events, taking them out of the event sequence and the rerouting them to the mouse events, I think I can use this -
      var touch = event.originalEvent.changedTouches[0],

and some others to get touch movement to track without scrolling the page.
0
 

Author Closing Comment

by:EasyToHelp
ID: 40498754
I have found a solution
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Use Mid in Html 6 21
AngularJS: ng-repeat 25 20
What is the new whtasapp feature 2 17
center navbar (navigation menu) on web page 3 14
The case of the missing phone talks about the way a small electronic gadget (the mobile phone) has penetrated into our lives and has made us addicted to it.
In this post we will learn different types of Android Layout and some basics of an Android App.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question