JQuery 可拖动 : How do I make a draggable element snap to the inner-top of a div?

Question

这个问题非常不言自明。我可以使用“snapMode:'inner'”将其捕捉到 div 的所有侧面，但不仅仅是顶部。有人能想到解决方法吗？

$('.draggableThing').draggable({
    snap:'.row',
    snapMode:'inner',//should say "inner-top" but this is not an available option
    snapTolerance:5
});

http://jsfiddle.net/ZbeJL/2/

Answer 1

这有点破解，但如果您只在项目的这一部分使用 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;

<强> Working Example

就像我说的，它有点像黑客，但它有效。

更新:

我不太喜欢之前的答案，所以我想出了如何向 jQuery-ui 添加一些 snapMode 选项。您仍然需要编辑 jQuery-ui 文件，但我认为这可能是值得的。

除了标准的内部、外部以及两者。我添加了以下选项:

• 内部顶部
• 内底
• 内左
• 内右
• 外部顶部
• 外底
• 外部右
• 外部左

<强> Better Working Example

方法如下:

搜索:

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 != '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;
}