My Programming Tricks

Caveman Blogger

This is the touchscreen version of the post:

http://webtrick101.blogspot.com/2011/12/javascript-to-move-div-around-non.html

I believe most browser in touchscreen mobile devices will be supported such as iPhone/iPad/Android. Blackberry won't be supported as it is running browser with very low level of compatibility.

Here are the codes:

<html>
<head>
<script type="text/javascript">
var PositionFlag = 0;
var p1;
var p2;
var p3;
var p4;
var pos_x;
var pos_y;
var diff_x;
var diff_y;
var move_x;
var move_y;
var once = 0;

function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
}
catch (e) {
return false;
}
}

var touch_capable = is_touch_device();

function init() {
if (touch_capable) {
document.getElementById('dis_info5').innerText = "Touch Capable";
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
}
document.getElementById('myBox').style.cursor = 'hand';
document.body.style.cursor = 'crosshair';
document.getElementById('myBox').style.left=100;
document.getElementById('myBox').style.top=100;
}

function UpdateXY() {

box_x = document.getElementById('myBox').offsetLeft;
box_y = document.getElementById('myBox').offsetTop;

if (!touch_capable) {

move_x = window.event.clientX;
move_y = window.event.clientY;

p1 = 'Mouse: X=' + move_x + ' Y=' + move_y ;
document.getElementById('dis_info1').innerText = p1;
}
else {

move_x = event.touches[0].pageX;
move_y = event.touches[0].pageY;

if (move_x > box_x-225 && move_x < box_x+225 && move_y > box_y-225 && move_y < box_y+225) {
PositionFlag = 1;
}
else {
PositionFlag = 0;
}

p4 = 'Touch ' + event.touches.length + ': X=' + event.touches[0].pageX + ' Y=' + event.touches[0].pageY ;
document.getElementById('dis_info4').innerText = p4;
}

p2 = 'myBox: X=' + box_x + ' Y=' + box_y ;
document.getElementById('dis_info2').innerText = p2;

if (once == 0) {
diff_x = move_x - box_x;
diff_y = move_y - box_y;

}

p3 = 'Diff : X=' + diff_x + ' Y=' + diff_y ;
document.getElementById('dis_info3').innerText = p3;

if (PositionFlag == 1) {
x = move_x - diff_x;
y = move_y - diff_y;

document.getElementById('myBox').style.left = x;
document.getElementById('myBox').style.top = y;
once = 1;
}

}

</script></head>

<div id="myBox" style="position:absolute;z-index:100;" onmousedown="PositionFlag=1;" onmouseup="PositionFlag=0;once=0;" width=75 height=75><table border=1 width=75 height=75><tr><td bgcolor=#ddeeff align=center><br> <font color=orange>orange</font> <br><br></td></tr></table></div>

<script>

if (!touch_capable) {
document.write("<body onmousemove=UpdateXY() onload=init()>");
}
else {
document.write("<body ontouchmove=UpdateXY() onload=init()>");
}

</script>

<div id="dis_info1"></div>
<div id="dis_info2"></div>
<div id="dis_info3"></div>
<div id="dis_info4"></div>
<div id="dis_info5"></div>

</body>
</html>

Basically all the tricks are highlighted in green. Instead of using onmousemove as the listener, use ontouchmove. There is also a need to set up an event listener for ontouchmove so that you just don't only get the first touch coordinates. In order to get all the coordinates, the event listener has to be set up as shown in green above.

Those +225 and -225 shown in red is a matter of preference. You can change it to other values. I find these numbers OK as they are buffers in case your finger moves too fast. If you choose number that is too big, the drag can be smooth but the area affected will be large.

Lastly, the broswer sniffer. I used to use the iphone/ipad/Android sniffer but it is getting nowhere as new mobile devices are being released from time to time and there is a need to maintain the sniffer to add in new supported device. I use the touch capability sniffer which is maintenance free and more compatible.

Hope you like this special javascript trick for mobile devices using touchscreen!!!

My Programming Tricks

Labels

Monday, December 26, 2011

Javascript to Move a DIV around (touchscreen version, drag-and-drop for iphone/ipad/android)

No comments:

Post a Comment