Question

我想要的是在dragee对象上添加自定义点。默认设置仅捕捉糖衣对象的边框。我想要的是在对象的中间添加一个自定义点来捕捉。

例如，如果对象的宽度为2且高度为2，则中间点为1,1并将捕捉到在以下位置声明的对象（例如＆＃39; .snapper＆＃39;）

$(object).draggable({ snap: ".snapper"});

这是我目前的工作：

function MiddlePointSnapping(ui, inst) {
    var dragee = ui.helper[0]; var pos = $(dragee).position(); var mx = pos.left + Math.ceil($(dragee).width() / 2); var my = pos.top + Math.ceil($(dragee).height() / 2);
    var closestX = null; var closestY = null; var dx = null; var dy = null;
    $(dragee).closest('.grid-stack').find(".drag-reference").each(function (i, el) {
        if (i == 0) {
            dx = Math.abs(mx - $(el).position().left); closestX = $(el).position().left;
            dy = Math.abs(my - $(el).position().top); closestY = $(el).position().top;
        }
        else {
            if (dx > Math.abs(mx - $(el).position().left)) {
                dx = Math.abs(mx - $(el).position().left); closestX = $(el).position().left;
            }
            if (dy > Math.abs(my - $(el).position().top)) {
                dy = Math.abs(my - $(el).position().top); closestY = $(el).position().top;
            }
        }
    });
    if (dx < _snapTolerance) {
        ui.position.left = closestX - Math.ceil($(dragee).width() / 2);
    }
    if (dy < _snapTolerance) {
        ui.position.top = closestY - Math.ceil($(dragee).height() / 2);
    }
}

我从drag:调用此函数。这个问题是我分配：

ui.position.left = closestX - Math.ceil($(dragee).width() / 2);
ui.position.top = closestY - Math.ceil($(dragee).height() / 2);

一旦它被捕捉，我就不能再移动物体了，因为它一直在捕捉到最近的鲷鱼。代码不断将ui.position.left and top分配给snap，并且不允许我移动对象。

我怎样才能做到这一点？

Answer 1

我就这样做了：

function MiddlePointSnapping(ui) {
    var dragee = ui.helper[0]; 
    var pos = ui.position; 
    var mx = pos.left + Math.ceil($(dragee).width() / 2); 
    var my = pos.top + Math.ceil($(dragee).height() / 2);
    var dx = null; 
    var dy = null; 
    var realdx = null; 
    var realdy = null;
    $(dragee).closest('.grid-stack').find(".drag-reference").each(function (i, el) {
        if (i == 0) {
            realdx = mx - $(el).position().left; dx = Math.abs(realdx);
            realdy = my - $(el).position().top; dy = Math.abs(realdy);
        }
        else {
            if (dx > Math.abs(mx - $(el).position().left)) {
                realdx = mx - $(el).position().left; dx = Math.abs(realdx);
            }
            if (dy > Math.abs(my - $(el).position().top)) {
                realdy = my - $(el).position().top; dy = Math.abs(realdy);
            }
        }
    });
    if (dx < _snapTolerance) {
        ui.position.left -= realdx;
    }
    if (dy < _snapTolerance) {
        ui.position.top -= realdy;
    }
}

Jquery：将捕捉点添加到可拖动对象

1 个答案: