jquerydraggable:如何使一个Draggable元素捕捉到div的内部顶部?
这个问题不言自明。我可以用“snapMode:'inner'”将其捕捉到div的所有边,但不仅仅是顶部。有人能想出一个解决办法吗jquerydraggable:如何使一个Draggable元素捕捉到div的内部顶部?,jquery,jquery-ui,jquery-draggable,Jquery,Jquery Ui,Jquery Draggable,这个问题不言自明。我可以用“snapMode:'inner'”将其捕捉到div的所有边,但不仅仅是顶部。有人能想出一个解决办法吗 $('.draggableThing').draggable({ snap:'.row', snapMode:'inner',//should say "inner-top" but this is not an available option snapTolerance:5 }); 我不确定,但jQueryUI似乎不支持这样的东西。您可以
$('.draggableThing').draggable({
snap:'.row',
snapMode:'inner',//should say "inner-top" but this is not an available option
snapTolerance:5
});
我不确定,但jQueryUI似乎不支持这样的东西。您可以使用此解决方法来获得所需的行为。只需将另一个div放入用于快照的div中
<div class='row'>
<div class='innerHack'></div>
</div>
这有点像黑客,但是如果您只在项目的这一部分使用snap选项,您可以在jQuery ui文件中注释掉不需要的功能 在jQuery ui文件中搜索以下三行:
if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left;
if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;
并这样评论他们:
//if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
//if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left;
//if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;
就像我说的,这有点像黑客,但它是有效的
更新:
我不太喜欢前面的答案,所以我想出了如何向jQuery ui添加一些snapMode选项。您仍然需要编辑jQueryUI文件,但我认为这可能是值得的
除了标准的内部、外部和两者之外。我添加了以下选项:
- 内顶
- 内底
- 左内
- 右翼
- 外层
- 外套
- 外光
- 外层
if(o.snapMode != 'inner') {
var ts = Math.abs(t - y2) <= d;
var bs = Math.abs(b - y1) <= d;
var ls = Math.abs(l - x2) <= d;
var rs = Math.abs(r - x1) <= d;
if(ts) ui.position.top = inst._convertPositionTo("relative", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b, left: 0 }).top - inst.margins.top;
if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left;
if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r }).left - inst.margins.left;
}
var first = (ts || bs || ls || rs);
if(o.snapMode != 'outer') {
var ts = Math.abs(t - y1) <= d;
var bs = Math.abs(b - y2) <= d;
var ls = Math.abs(l - x1) <= d;
var rs = Math.abs(r - x2) <= d;
if(ts) ui.position.top = inst._convertPositionTo("relative", { top: t, left: 0 }).top - inst.margins.top;
if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left;
if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;
}
if(o.snapMode!=“内部”){
var ts=Math.abs(t-y2)哇,这太酷了!我本来会这么做的,但我真的不知道如何读取JQuery文件。非常感谢!
if (o.snapMode != 'inner' && o.snapMode != 'innerTop' && o.snapMode != 'innerBottom' && o.snapMode != 'innerLeft' && o.snapMode != 'innerRight' && o.snapMode != 'outerTop' && o.snapMode != 'outerBottom' && o.snapMode != 'outerLeft' && o.snapMode != 'outerRight') {
var ts = Math.abs(t - y2) <= d;
var bs = Math.abs(b - y1) <= d;
var ls = Math.abs(l - x2) <= d;
var rs = Math.abs(r - x1) <= d;
if (ts) ui.position.top = inst._convertPositionTo("relative", {
top: t - inst.helperProportions.height,
left: 0
}).top - inst.margins.top;
if (bs) ui.position.top = inst._convertPositionTo("relative", {
top: b,
left: 0
}).top - inst.margins.top;
if (ls) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: l - inst.helperProportions.width
}).left - inst.margins.left;
if (rs) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: r
}).left - inst.margins.left;
}
var first = (ts || bs || ls || rs);
if (o.snapMode != 'outer' && o.snapMode != 'innerTop' && o.snapMode != 'innerBottom' && o.snapMode != 'innerLeft' && o.snapMode != 'innerRight' && o.snapMode != 'outerTop' && o.snapMode != 'outerBottom' && o.snapMode != 'outerLeft' && o.snapMode != 'outerRight') {
var ts = Math.abs(t - y1) <= d;
var bs = Math.abs(b - y2) <= d;
var ls = Math.abs(l - x1) <= d;
var rs = Math.abs(r - x2) <= d;
if (ts) ui.position.top = inst._convertPositionTo("relative", {
top: t,
left: 0
}).top - inst.margins.top;
if (bs) ui.position.top = inst._convertPositionTo("relative", {
top: b - inst.helperProportions.height,
left: 0
}).top - inst.margins.top;
if (ls) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: l
}).left - inst.margins.left;
if (rs) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: r - inst.helperProportions.width
}).left - inst.margins.left;
}
if (o.snapMode == 'innerTop') {
var ts = Math.abs(t - y1) <= d;
if (ts) ui.position.top = inst._convertPositionTo("relative", {
top: t,
left: 0
}).top - inst.margins.top;
}
if (o.snapMode == 'innerBottom') {
var bs = Math.abs(b - y2) <= d;
if (bs) ui.position.top = inst._convertPositionTo("relative", {
top: b - inst.helperProportions.height,
left: 0
}).top - inst.margins.top;
}
if (o.snapMode == 'innerLeft') {
var ls = Math.abs(l - x1) <= d;
if (ls) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: l
}).left - inst.margins.left;
}
if (o.snapMode == 'innerRight') {
var rs = Math.abs(r - x2) <= d;
if (rs) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: r - inst.helperProportions.width
}).left - inst.margins.left;
}
if (o.snapMode == 'outerTop') {
var ts = Math.abs(t - y2) <= d;
if (ts) ui.position.top = inst._convertPositionTo("relative", {
top: t - inst.helperProportions.height,
left: 0
}).top - inst.margins.top;
}
if (o.snapMode == 'outerBottom') {
var bs = Math.abs(b - y1) <= d;
if (bs) ui.position.top = inst._convertPositionTo("relative", {
top: b,
left: 0
}).top - inst.margins.top;
}
if (o.snapMode == 'outerLeft') {
var ls = Math.abs(l - x2) <= d;
if (ls) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: l - inst.helperProportions.width
}).left - inst.margins.left;
}
if (o.snapMode == 'outerRight') {
var rs = Math.abs(r - x1) <= d;
if (rs) ui.position.left = inst._convertPositionTo("relative", {
top: 0,
left: r
}).left - inst.margins.left;
}