Как и в вашем примере с Kirupa, в обработчике MouseMove вы берете момент за моментом x и y перетаскиваемого элемента и пересчитываете его. Например, чтобы ограничить элемент вертикальной линией, вы должны вернуть x обратно к x, с которого начинался элемент, и освободить y, чтобы следовать за мышью.
В вашем случае вам необходим пересчет x-and-y, который может 1) определить, находится ли движение на вашем пути или нет, и 2) если нет, переместить его в ближайшую точку на этом пути (что угодно) Ближайший "значит для тебя).
Может быть, обнаружение столкновений? Если столкновения нет (предмет не по пути), то сдвигайте предмет в некотором направлении (по горизонтали или по вертикали ...), пока не получите это столкновение.
Хорошо
Если у StackOverflow нет с этим проблем, может быть, вы могли бы отчитаться, когда у вас все получится?
Джон Хикс