请帮忙?当元素被拖动拾取时,它只能从中间拾取?
例如,我有一个 div,当您拿起它开始拖动时,它会捕捉 div,使光标/鼠标位于其中间。
这是代码。
// DEFINE DEFAULT VARIABLES
var _target=null, _dragx=null, _dragy=null, _rotate=null, _resort=null;
var _dragging=false, _sizing=false, _animate=false;
var _rotating=0, _width=0, _height=0, _left=0, _top=0, _xspeed=0, _yspeed=0;
var _zindex=1000;
jQuery.fn.touch = function(settings) {
// DEFINE DEFAULT TOUCH SETTINGS
settings = jQuery.extend({
animate: true,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
}, settings);
// BUILD SETTINGS OBJECT
var opts = [];
opts = $.extend({}, $.fn.touch.defaults, settings);
// ADD METHODS TO OBJECT
this.each(function(){
this.opts = opts;
this.ontouchstart = touchstart;
this.ontouchend = touchend;
this.ontouchmove = touchmove;
this.ongesturestart = gesturestart;
this.ongesturechange = gesturechange;
this.ongestureend = gestureend;
});
};
function touchstart(e){
_target = this.id;
_dragx = this.opts.dragx;
_dragy = this.opts.dragy;
_resort = this.opts.resort;
_animate = this.opts.animate;
_xspeed = 0;
_yspeed = 0;
$(e.changedTouches).each(function(){
var curLeft = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left"));
var curTop = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top"));
if(!_dragging && !_sizing){
_left = (e.pageX - curLeft);
_top = (e.pageY - curTop);
_dragging = [_left,_top];
if(_resort){
_zindex = ($('#'+_target).css("z-index") == _zindex) ? _zindex : _zindex+1;
$('#'+_target).css({ zIndex: _zindex });
}
}
});
};
function touchmove(e){
if(_dragging && !_sizing && _animate) {
var _lastleft = (isNaN(parseInt($('#'+_target).css("left")))) ? 0:parseInt($('#'+_target).css("left"));
var _lasttop = (isNaN(parseInt($('#'+_target).css("top")))) ? 0:parseInt($('#'+_target).css("top"));
}
$(e.changedTouches).each(function(){
e.preventDefault();
_left = (this.pageX-(parseInt($('#'+_target).css("width"))/2));
_top = (this.pageY-(parseInt($('#'+_target).css("height"))/2));
if(_dragging && !_sizing) {
if(_animate){
_xspeed = Math.round((_xspeed + Math.round( _left - _lastleft))/1.5);
_yspeed = Math.round((_yspeed + Math.round( _top - _lasttop))/1.5);
}
if(_dragx || _dragy) $('#'+_target).css({ position: "absolute" });
if(_dragx) $('#'+_target).css({ left: _left+"px" });
if(_dragy) $('#'+_target).css({ top: _top+"px" });
}
});
};
function touchend(e){
$(e.changedTouches).each(function(){
if(!e.targetTouches.length){
_dragging = false;
if(_animate){
_left = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left"));
_top = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top"));
var animx = (_dragx) ? (_left+_xspeed)+"px" : _left+"px";
var animy = (_dragy) ? (_top+_yspeed)+"px" : _top+"px";
if(_dragx || _dragy) $('#'+_target).animate({ left: animx, top: animy }, "fast");
}
}
});
setTimeout(changeBack,5000,_target);
};
function gesturestart(e){
_sizing = [$('#'+this.id).css("width"), $('#'+this.id).css("height")];
};
function gesturechange(e){
if(_sizing){
_width = (this.opts.scale) ? Math.min(parseInt(_sizing[0])*e.scale, 300) : _sizing[0];
_height = (this.opts.scale) ? Math.min(parseInt(_sizing[1])*e.scale, 300) : _sizing[1];
_rotate = (this.opts.rotate) ? "rotate(" + ((_rotating + e.rotation) % 360) + "deg)" : "0deg";
$('#'+this.id).css({ width: _width+"px", height: _height+"px", webkitTransform: _rotate });
}
};
function gestureend(e){
_sizing = false;
_rotating = (_rotating + e.rotation) % 360;
};
这仅在您开始拖动时发生,而不是在您第一次单击时发生。
有人告诉我将:更改
_left = (this.pageX-(parseInt($('#'+_target).css("width"))/2));
_top = (this.pageY-(parseInt($('#'+_target).css("height"))/2));
为:
_left = (this.pageX);
_top = (this.pageY);
但这只会使其从顶部恢复。
如何让它从鼠标点击的地方拾取?
编辑: 这是针对ipad的,在电脑上测试不起作用。 但任何帮助都会很棒,我被困住了
I have a div for example, and when you pick it up to start dragging, it snaps the div so the cursor/mouse is in the middle of it.
This is the code..
// DEFINE DEFAULT VARIABLES
var _target=null, _dragx=null, _dragy=null, _rotate=null, _resort=null;
var _dragging=false, _sizing=false, _animate=false;
var _rotating=0, _width=0, _height=0, _left=0, _top=0, _xspeed=0, _yspeed=0;
var _zindex=1000;
jQuery.fn.touch = function(settings) {
// DEFINE DEFAULT TOUCH SETTINGS
settings = jQuery.extend({
animate: true,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
}, settings);
// BUILD SETTINGS OBJECT
var opts = [];
opts = $.extend({}, $.fn.touch.defaults, settings);
// ADD METHODS TO OBJECT
this.each(function(){
this.opts = opts;
this.ontouchstart = touchstart;
this.ontouchend = touchend;
this.ontouchmove = touchmove;
this.ongesturestart = gesturestart;
this.ongesturechange = gesturechange;
this.ongestureend = gestureend;
});
};
function touchstart(e){
_target = this.id;
_dragx = this.opts.dragx;
_dragy = this.opts.dragy;
_resort = this.opts.resort;
_animate = this.opts.animate;
_xspeed = 0;
_yspeed = 0;
$(e.changedTouches).each(function(){
var curLeft = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left"));
var curTop = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top"));
if(!_dragging && !_sizing){
_left = (e.pageX - curLeft);
_top = (e.pageY - curTop);
_dragging = [_left,_top];
if(_resort){
_zindex = ($('#'+_target).css("z-index") == _zindex) ? _zindex : _zindex+1;
$('#'+_target).css({ zIndex: _zindex });
}
}
});
};
function touchmove(e){
if(_dragging && !_sizing && _animate) {
var _lastleft = (isNaN(parseInt($('#'+_target).css("left")))) ? 0:parseInt($('#'+_target).css("left"));
var _lasttop = (isNaN(parseInt($('#'+_target).css("top")))) ? 0:parseInt($('#'+_target).css("top"));
}
$(e.changedTouches).each(function(){
e.preventDefault();
_left = (this.pageX-(parseInt($('#'+_target).css("width"))/2));
_top = (this.pageY-(parseInt($('#'+_target).css("height"))/2));
if(_dragging && !_sizing) {
if(_animate){
_xspeed = Math.round((_xspeed + Math.round( _left - _lastleft))/1.5);
_yspeed = Math.round((_yspeed + Math.round( _top - _lasttop))/1.5);
}
if(_dragx || _dragy) $('#'+_target).css({ position: "absolute" });
if(_dragx) $('#'+_target).css({ left: _left+"px" });
if(_dragy) $('#'+_target).css({ top: _top+"px" });
}
});
};
function touchend(e){
$(e.changedTouches).each(function(){
if(!e.targetTouches.length){
_dragging = false;
if(_animate){
_left = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left"));
_top = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top"));
var animx = (_dragx) ? (_left+_xspeed)+"px" : _left+"px";
var animy = (_dragy) ? (_top+_yspeed)+"px" : _top+"px";
if(_dragx || _dragy) $('#'+_target).animate({ left: animx, top: animy }, "fast");
}
}
});
setTimeout(changeBack,5000,_target);
};
function gesturestart(e){
_sizing = [$('#'+this.id).css("width"), $('#'+this.id).css("height")];
};
function gesturechange(e){
if(_sizing){
_width = (this.opts.scale) ? Math.min(parseInt(_sizing[0])*e.scale, 300) : _sizing[0];
_height = (this.opts.scale) ? Math.min(parseInt(_sizing[1])*e.scale, 300) : _sizing[1];
_rotate = (this.opts.rotate) ? "rotate(" + ((_rotating + e.rotation) % 360) + "deg)" : "0deg";
$('#'+this.id).css({ width: _width+"px", height: _height+"px", webkitTransform: _rotate });
}
};
function gestureend(e){
_sizing = false;
_rotating = (_rotating + e.rotation) % 360;
};
This only happens when you start dragging, not when you first click down.
Someone told me to change:
_left = (this.pageX-(parseInt($('#'+_target).css("width"))/2));
_top = (this.pageY-(parseInt($('#'+_target).css("height"))/2));
to:
_left = (this.pageX);
_top = (this.pageY);
But that just makes it pick up from the top.
How do I make it pick up from where the mouse clicks?
EDIT:
This is for the ipad and it doesn't work to test on the computer..
but ANY help would be great, im stuck
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我对
_top
和_left
变量了解不多,但也许您可以在 onclick 事件期间将它们设置为鼠标位置。该页面有一些用于选择鼠标位置的代码:使用 Javascript 进行鼠标跟踪
I don't know much about the
_top
and_left
variables but maybe you could set them to the mouse position during an onclick event. This page has some code for selecting the mouse position:Mouse tracking using Javascript