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

时间:2017-01-20 06:57:12

标签: javascript jquery html jquery-ui

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

例如,如果对象的宽度为2且高度为2,则中间点为1,1并将捕捉到在以下位置声明的对象(例如' .snapper')

$(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,并且不允许我移动对象。

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:0)

我就这样做了:

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