可拖动捕捉到以元素为中心的水平和垂直线

Question

我有一个可拖动的div，我想让它垂直于垂直于div中心的直线，以及从div中心开始的水平线。以下图为例。黑色正方形应该垂直于垂直的红线和div的水平线。

这应该适用于div的位置。因此，在移动div之后，捕捉线仍应居中于div的新位置。

Answer 1

我能够通过创建.x-guide和具有最低z-index的.y-guide div来解决它，以防止它与任何可拖动元素重叠。 x-guide的宽度为100％，y-guide的高度为100％。

当我拖动元素时，我使用stop事件使用以下代码重新定位向导：

$('.element').draggable({
    appendTo: "body",
    snap: ".x-guide, .y-guide",
    snapMode: "inner",
    stop: function(event, ui) {
        $('.x-guide').css("top", $('.element').css("top"));
        $('.y-guide').css("left", $('.element').css("left"));
    }
});

你可以在这里看到JSFiddle：http://jsfiddle.net/c6L9rLxt/