Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 141
  • Last Modified:

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.
0
EasyToHelp
Asked:
EasyToHelp
  • 4
  • 3
1 Solution
 
RobOwner (Aidellio)Commented:
Have you considered using the jquery mobile framework?  It would be better suited to this
0
 
Slick812Commented:
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
 
EasyToHelpAuthor Commented:
Do you think it is possible to create a jquery Selectable on mobile?
http://jqueryui.com/selectable/#display-grid
0
Industry Leaders: 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!

 
Slick812Commented:
???
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
 
EasyToHelpAuthor Commented:
Thanks Slick
0
 
EasyToHelpAuthor Commented:
@slick i have found some code that may be useful check this out http://touchpunch.furf.com/
0
 
Slick812Commented:
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
 
EasyToHelpAuthor Commented:
I have found a solution
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now