I have use drag event but it drag only from left to right and right to left
I have use drag event but it drag only from left to right and right to left
BY 29 Jul 2015Web Application Development
Hi,
I want to drag div in any direction.I have developed an application in which i can drag div only from left to right and right to left.I want div should be drag in any direction.How can i do it.My running code is
var box2 = document.getElementById(‘box2’),
boxleft, // left position of moving box
startx, // starting x coordinate of touch point
dist = 0, // distance traveled by touch point
touchobj = null // Touch object holder
box2.addEventListener(‘touchstart’, function(e){
touchobj = e.changedTouches[0] // reference first touch point
boxleft = parseInt(box2.style.left) // get left position of box
startx = parseInt(touchobj.clientX) // get x coord of touch point
e.preventDefault() // prevent default click behavior
}, false)
box2.addEventListener(‘touchmove’, function(e){
touchobj = e.changedTouches[0] // reference first touch point for this event
var dist = parseInt(touchobj.clientX) – startx // calculate dist traveled by touch point
// move box according to starting pos plus dist
// with lower limit 0 and upper limit 380 so it doesn’t move outside track:
box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + ‘px’
e.preventDefault()
}, false)
I have use drag event but it drag only from left to right and right to left
Hi,
I want to drag div in any direction.I have developed an application in which i can drag div only from left to right and right to left.I want div should be drag in any direction.How can i do it.My running code is
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″>
<meta name=”description” content=”Tizen basic template generated by Tizen Web IDE” />
<title>Tizen Web IDE – Tizen – Tizen basic Application</title>
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<script src=”js/main.js”></script>
</head>
<script>
window.addEventListener(‘load’, function(){
var box2 = document.getElementById(‘box2’),
boxleft, // left position of moving box
startx, // starting x coordinate of touch point
dist = 0, // distance traveled by touch point
touchobj = null // Touch object holder
box2.addEventListener(‘touchstart’, function(e){
touchobj = e.changedTouches[0] // reference first touch point
boxleft = parseInt(box2.style.left) // get left position of box
startx = parseInt(touchobj.clientX) // get x coord of touch point
e.preventDefault() // prevent default click behavior
}, false)
box2.addEventListener(‘touchmove’, function(e){
touchobj = e.changedTouches[0] // reference first touch point for this event
var dist = parseInt(touchobj.clientX) – startx // calculate dist traveled by touch point
// move box according to starting pos plus dist
// with lower limit 0 and upper limit 380 so it doesn’t move outside track:
box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + ‘px’
e.preventDefault()
}, false)
}, false)
</script>
<div id=”track” class=”track” style=”position:relative;”>
<div id=”box2″ style=”left:0; top:0;position:absolute;”>Drag Me</div>
</div>
<body>
</body>
</html>
It works fine but drag only from left to right and right to left.I want it also drag from top to bottom and bottom to top.
please help me
Thanks and regards
Mohit Kumar
BY
16 Apr 2025
Tizen Studio
BY
04 Nov 2024
Tizen Studio
BY
02 Apr 2024
Tizen Studio