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文件，但我认为这可能是值得的。

除了标准的内部，外部和两者。我添加了以下选项：

innerTop
innerBottom
innerLeft
InnerRight
outerTop
outerBottom
outerRight
outerLeft

<强> 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;
}

Answer 2

我不确定，但似乎jQueryUI不支持这样的东西。您可以使用此变通方法来获取所需的行为。只需在div中添加另一个用于捕捉的div。

<div class='row'>
    <div class='innerHack'></div>
</div>

Here's a Fiddle

JQuery Draggable：如何将可拖动元素捕捉到div的内部顶部？

2 个答案: