Drag And Drop Along A Diagonal Line?

Are there any examples of a drag-and-drop solution in which the elements being dragged can only move along a slanted line? For example, constrain an element's draggability so that

Solution 1:

complete example (FF only)

<divid="drag"style="position:absolute;width:20px;height:20px;background:red"></div><script>var angle = 10;
window.onload = function() 
{
    var d = document.getElementById("drag");
    d.onmousedown = function() {
        document.onmouseup = function() {
            document.onmousemove = null;
        }
        document.onmousemove = function(e) {
            d.style.left = e.clientX;
            d.style.top = e.clientX * Math.tan(angle * Math.PI / 180);
        }
    }
}
</script>

Solution 2:

It would seem the only way to really do that, without really annoying the user, is to keep track of the angle from the starting location, and if they are in an invalid angle then don't set the droptarget.

This way, if they let go it reverts back to the original position, and the only valid places to drop meet your requirements.

Solution 3:

This seems easy to do if you've written your own DnD handler. Basically, DnD movement that is constrained to either vertical or horizontal axises work by only changing the left or top CSS attributes when dynamically position the draggable element.

You can use this same idea to customize this restrained behavior. Instead just translating the (X,Y) of the current mouse position for the element's CSS left/right, you can use the X for the left and derive the right by passing it through a linear function like y = mx + b.