求手指 拖动 效果

Question

手指拖动

Answer 1

touch事件，你监听两个touch的间隔事件就能判断他们的速度有多快了

Answer 2

能不能介绍一下，你用什么套件开发手机web的。

Answer 3

大哥俺就是自己编的啊,木用任何lib,用Notepad++编辑器........
有什么好的介绍下呗

Answer 4

你是说touch开始和touch结束的时间间隔???
你弄过么?

Answer 5

//获取鼠标或手势坐标
getPos:function (event){
var eX=0,eY=0;
if (event.type=='touchstart'){
eX=event.originalEvent.changedTouches[0].clientX;
eY=event.originalEvent.changedTouches[0].clientY;
}else if (event.type=='touchmove'){
eX=event.originalEvent.changedTouches[0].clientX;
eY=event.originalEvent.changedTouches[0].clientY;
}else if (event.type=='touchend'){
eX=event.changedTouches[0].clientX;
eY=event.changedTouches[0].clientY;
}else{
eX=event.clientX;
eY=event.clientY;
}
eX=Brush.toFloat(eX)+Brush.toFloat($(window).scrollLeft())-Brush.toFloat(Brush["canvas"].css("border-left-width")) - Brush["canvas"].offset().left;
eY=Brush.toFloat(eY)+Brush.toFloat($(window).scrollTop())-Brush.toFloat(Brush["canvas"].css("border-top-width")) - Brush["canvas"].offset().top;
return {x:Brush.toFloat(eX,5),y:Brush.toFloat(eY,5)};
},bind:function(id){
Shape.bind(id);
Brush["canvas"] = $('#'+id);
var supportTouch = "ontouchstart" in document.documentElement;
var moveEvent = supportTouch ? "touchmove" : "mousemove",
startEvent = supportTouch ? "touchstart" : "mousedown",
endEvent = supportTouch ? "touchend" : "mouseup";
//$("#showData").val(supportTouch);
Brush["canvas"].bind(startEvent,Brush["start"]);
Brush["canvas"].bind(moveEvent,Brush["move"]);
Brush["canvas"].bind(endEvent,Brush["end"]);
Brush["canvas"].bind("mouseout",Brush["out"]);
Brush["canvas"].bind("mouseover",Brush["over"]);
},
这里没有帮你写实现哈，只是我把我曾经使用过的代码贴给你看，处理你那个东西主要还是在touchmove，touchstart，touchend这三个事件中处理，只是这里处理了pc机和平板电脑，最上面那个代码是获取当前的手指或者鼠标的坐标，当然你在改变div位置的时候肯定是在move事件中修改，这里有个移动div的例子var Mp3Drag = {
option:{
mainDivId:null,
dragTitleId:null
},
dragged : false,
x:0,
y:0,
init:function(){
Mp3Drag.$mainDiv = $("#"+Mp3Drag.option.mainDivId);
Mp3Drag.$mainTitle = Mp3Drag.$mainDiv.find("#"+Mp3Drag.option.dragTitleId);
Mp3Drag.$mainTitle.live(startEvent,Mp3Drag.dragStart);
//document.onmousemove=Mp3Drag.move;
//document.onmouseup=Mp3Drag.dragEnd;
//$(document).mousemove(Mp3Drag.move);
//$(document).mouseup(Mp3Drag.dragEnd); },
dragStart:function(event){
event = window.event ? window.event : event;
event.preventDefault();
var eX,eY;
  if(event.type=='touchstart'){
eX=event.targetTouches[0].clientX;
eY=event.targetTouches[0].clientY;
}else{
eX=event.clientX;
eY=event.clientY;
}
 var target=event.srcElement||event.target;
 Mp3Drag.$currentTitle = $(target);
 Mp3Drag.dragged = true;
 Mp3Drag.$currentTitle.css({cursor:"move"});
 Mp3Drag.x = Mp3Drag.$mainDiv.offset().left-eX;
 Mp3Drag.y = Mp3Drag.$mainDiv.offset().top-eY;
 document.addEventListener(moveEvent,Mp3Drag.move);
 document.addEventListener(endEvent,Mp3Drag.dragEnd);
 
},
move : function(event) {
event = event||window.event;
event.preventDefault();
var eX,eY;
 if (event.type=='touchmove'){
eX=event.touches[0].clientX;
eY=event.touches[0].clientY;
}else{
eX=event.clientX;
eY=event.clientY;
}
if(!Mp3Drag.dragged){
return;
}
var left = 0,right = 0,top = 0,botton = 0;
var $d = $(".container");
left = $d.offset().left;
right = left + $d.width();
top = $d.offset().top;
botton = top + $d.height();
Mp3Drag.$mainDiv.css({"position":"absolute","left":parseInt(Mp3Drag.x,10)+parseInt(eX,10),"top":parseInt(Mp3Drag.y,10)+parseInt(eY,10),"z-index":9999});
if((parseInt(Mp3Drag.$mainDiv.offset().left,10))< left) {
Mp3Drag.$mainDiv.css({"position":"absolute","left":left,"z-index":9999});
}
if((parseInt(Mp3Drag.$mainDiv.offset().left,10)+parseInt(Mp3Drag.$mainDiv.width(),10))>right){
Mp3Drag.$mainDiv.css({"position":"absolute","left":right - parseInt(Mp3Drag.$mainDiv.width(),10),"z-index":9999});
}
if(parseInt(Mp3Drag.$mainDiv.offset().top,10)< top){
Mp3Drag.$mainDiv.css({"position":"absolute","top":top,"z-index":9999});
}
if((parseInt(Mp3Drag.$mainDiv.offset().top,10)+parseInt(Mp3Drag.$mainDiv.height(),10))> botton){
Mp3Drag.$mainDiv.css({"position":"absolute","top":botton - parseInt(Mp3Drag.$mainDiv.height(),10),"z-index":9999});
//return;
} 
/* if((parseInt(Mp3Drag.$mainDiv.offset().top,10)+parseInt(Mp3Drag.$mainDiv.height(),10))>$(document).height()){
Mp3Drag.$mainDiv.css({"position":"absolute","top":$(document).height()-parseInt(Mp3Drag.$mainDiv.height(),10),"z-index":9999});
} */

},
dragEnd : function(event) {
if(!Mp3Drag.dragged){
return;
}
event = event||window.event;
event.preventDefault();
document.removeEventListener(moveEvent,Mp3Drag.move);
document.removeEventListener(endEvent,Mp3Drag.dragEnd);
var eX,eY;
  if (event.type=='touchend'){
eX=event.changedTouches[0].clientX;
eY=event.changedTouches[0].clientY;
}else{
eX=event.clientX;
eY=event.clientY;
}
Mp3Drag.dragged = false;
/* Mp3Drag.$mainDiv.css({"position":"absolute","left":parseInt(Mp3Drag.x,10)+parseInt(eX,10),"top":parseInt(Mp3Drag.y,10)+parseInt(eY,10),"z-index":9999});
if((parseInt(Mp3Drag.$mainDiv.offset().left,10))<0) {
Mp3Drag.$mainDiv.css({"position":"absolute","left":0,"z-index":9999});
}
if((parseInt(Mp3Drag.$mainDiv.offset().left,10)+parseInt(Mp3Drag.$mainDiv.width(),10))>$(document).width()){
Mp3Drag.$mainDiv.css({"position":"absolute","left":$(document).width()-parseInt(Mp3Drag.$mainDiv.width(),10),"z-index":9999});
}
if(parseInt(Mp3Drag.$mainDiv.offset().top,10)<0){
Mp3Drag.$mainDiv.css({"position":"absolute","top":0,"z-index":9999});
}
if((parseInt(Mp3Drag.$mainDiv.offset().top,10)+parseInt(Mp3Drag.$mainDiv.height(),10))>$(document).height()){
Mp3Drag.$mainDiv.css({"position":"absolute","top":$(document).height()-parseInt(Mp3Drag.$mainDiv.height(),10),"z-index":9999});
} */
Mp3Drag.$currentTitle.css({cursor:"pointer"});
} 
};