Solved

Assistance with touchstart,touchend,touchmove

Posted on 2014-12-03
8
102 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 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479440
Have you considered using the jquery mobile framework?  It would be better suited to this
0
 
LVL 33

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
 
LVL 33

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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 33

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

706 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now