티스토리 뷰
I using jQuery to listen to the touchstart,touchmove and touchend, and I able to drag the 'dragitem' in iphone Safari(position change that base on the touchmove). But now the issue is how i can make the dropArea response when the 'dragitem' drag to the 'dropArea'.
For example the 'dropArea' will highlight/glow, change background color, and etc when the 'dragitem' is drag within the 'dropArea', but when it is away the 'dropArea' will remain normal. Any idea?
Thank in advance.
HTML:
<div class='dragArea' >
<div id='box1' class='dragitem'>
</div>
<div id='box2' class='dragitem'>
</div>
</div>
<div class='dropArea'></div>
jQuery:
var startTouchX = null;
var startTouchY = null;
var moveTouchX = null;
var moveTouchY = null;
var startPositionX = null;
var startPositionY = null;
$('.dragitem').bind('touchstart',function(event){
event.preventDefault();
var e = event.originalEvent;
startTouchX = e.targetTouches[0].pageX;
startTouchY = e.targetTouches[0].pageY;
startPositionX = $(this).css('left');
startPositionY = $(this).css('top');
});
$('.dragitem').bind('touchmove', function(event){
event.preventDefault();
var e = event.originalEvent;
moveTouchX = e.targetTouches[0].pageX;
moveTouchY = e.targetTouches[0].pageY;
$('#movex').text(moveTouchX);
$('#movey').text(moveTouchY);
$(this).css({top: (moveTouchY - 50), left: (moveTouchX - 5)});
});
$('.dragitem').bind('touchend', function(event){
$(this).animate({top: startPositionY, left: startPositionX}, 'fast');
});
'Javascript' 카테고리의 다른 글
레이어 팝업 예제 소스 (1) | 2016.08.01 |
---|---|
PHP에서 json_encode로 Json Data 통신 기본형 예제 소스 (0) | 2012.07.13 |
jQuery Mobile 기본 템플릿 사용 요약 (0) | 2011.04.14 |
Ajax, hash들과 & 역사(관련 이야기) (0) | 2011.03.24 |
a태그에서 onclick으로 함수 실행할때 href 동작 안하도록 (0) | 2011.03.14 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- LAPM
- r
- Non-Interactive
- app
- MySQL
- json
- Android
- 안드로이드 개발
- Linux
- MariaDB
- 시군구 이름
- 안드로이드
- rm으로 삭제
- java
- 지역고유코드
- apache
- 시도 이름
- 파일삭제
- 리눅스
- delete
- JavaScript
- c++
- 앱개발
- Tomcat
- API
- HTML
- 법정동코드
- 삭제한 파일 복원
- install
- Android 개발
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
글 보관함