根据拖动方向设置轴jQuery拖动
Set axis depending draggable direction jQuery draggable
如何根据轴的可拖动方向设置轴(初始化后)?
如果它被左右拖动,那么如果上下拖动,它将是x,y。
$("#belt").draggable({
handle: "li",
axis: "y",
start: function() {
//I want to be dragged in the axis i belong which should be x....
},
});
最初使用距离来约束运动,以获得用户移动方向的初始读数,然后设置轴限制。
var x, y;
$("#belt").draggable({
start: function(event) {
x = event.originalEvent.pageX;
y = event.originalEvent.pageY;
},
drag: function(event) {
if (x && y) {
axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
$("#belt").draggable('option', 'axis', axis);
x = y = null;
}
},
stop: function() {
x = y = null;
$("#belt").draggable('option', 'axis', false);
},
distance: 20
});
这是一把小提琴:http://jsfiddle.net/jhchen/B7J2E/
http://jsfiddle.net/B7J2E/40/
var x, y;
$("#test").draggable({
start: function(event) {
console.log(event);
x = event.originalEvent.pageX;
y = event.originalEvent.pageY;
console.log(x, y);
},
drag: function(event) {
if (event.shiftKey) {
if (x && y) {
axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
$("#test").draggable('option', 'axis', axis);
x = y = null;
}
}
},
stop: function() {
x = y = null;
$("#test").draggable('option', 'axis', false);
},
distance: 20
});
相关文章:
- jQuery UI可排序-多连接列表拖动
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI-当可丢弃时,必须删除拖动的元素
- jQuery UI可拖动:自定义捕捉方法
- 是否可以在jquery中使用拖动滑块在4个图像之间滑动
- Bootstrap和JQuery可拖动
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- JQuery UI可拖动:如果助手设置为克隆,为什么不't可拖动集的已应用类到克隆
- jQuery可拖动克隆-safari问题
- 允许具有相同 id 的对象可以使用 jQuery 拖动
- 使一组对象与 jQuery 一起拖动
- 修改(可拖动|jQuery UI)
- “居中拖动Jquery”对话框
- keep:将鼠标悬停在拖动jquery元素上
- 拖动jQuery中已删除元素的克隆
- 不带id的可拖动jQuery的保存位置
- 移除<从一个可拖动的时候被拖动- jquery
- 面板无法拖动- Jquery UI
- 禁用在“猫头鹰轮播”中的特定元素(项目)中拖动 - jquery
- 防止在拖动 jquery UI 滑块时出现鼠标输入/鼠标离开事件