asked on

Assistance with touchstart,touchend,touchmove

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.

Rob

Have you considered using the jquery mobile framework? It would be better suited to this

Member_2_248744

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.

EasyToHelp

ASKER

Do you think it is possible to create a jquery Selectable on mobile?
http://jqueryui.com/selectable/#display-grid

Member_2_248744

???
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.

EasyToHelp

ASKER

Thanks Slick

ASKER CERTIFIED SOLUTION

EasyToHelp

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_248744

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.

EasyToHelp

ASKER

I have found a solution