Mouse movement does not work on touch devices. How can I make this possible?

Question

mouse drag selection does not work on touch devices. how can i solve this problem. check my violin

http://jsfiddle.net/Brv6J/3/

$(function () {
    var isMouseDown = false;
    $("#our_table td")
        .mousedown(function () {
            isMouseDown = true;
            $(this).toggleClass("highlighted");
            return false; // prevent text selection
        })
        .mouseover(function () {
            if (isMouseDown) {
                $(this).toggleClass("highlighted");
            }
        });
    $(document)
        .mouseup(function () {
            isMouseDown = false;
        });
});

Answer 1

Attach touch events such as touchstart, touchhend, touchmove to elements. For example,

$("#our_table td")
.touchstart(function () {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    return false; // prevent text selection
})
.touchmove(function () {
    if (isMouseDown) {
        $(this).toggleClass("highlighted");
    }
});

Answer 2

Introduction 1

, script. mobile, . , script.

2

:

• mouse, touch.
• mousemove, node, , touchmove , . , node a node b, event.target node a.

, , touchstart touchmove , , .

// first - store the coords of all the cells for the position check
var matrix = $('#our_table td').map(function(){
  var e = $(this),
      o = e.offset(),
      w = e.width(),
      h = e.height();
  
  return {
    top: o.top,
    left: o.left,
    right: o.left + w,
    bottom: o.top + h,
    e: e
  }
}).get();

var currentTarget = $(),
    activeTarget = $();


var touchF = function(e) {
   var touch = e.originalEvent.touches[0];
   currentTarget = getCurrent(
       {
         clientX: touch.clientX,
         clientY: touch.clientY
       }
     );
  
    // if the touch is in one of the cells and it disfferent than the last touch cell
    if (currentTarget && currentTarget != activeTarget) {
      activeTarget = currentTarget;
      activeTarget.toggleClass('highlighted');
    }
 } 

$('#our_table').bind({
  touchstart: touchF,
  touchmove: touchF
});

function getCurrent(touch) {
  // check if the touch coords are in the position of one of the cells and which one
  var a = matrix.filter(function(obj) {
    var b = (
      touch.clientX > obj.left &&
      touch.clientX < obj.right &&
      touch.clientY < obj.bottom &&
      touch.clientY > obj.top
    );
    
    return b;
  });
  
  return a.length > 0 ? a[0].e : null;
}

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

table td.highlighted {
  background-color:#999;
}

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

: http://jsbin.com/favobu