Question

I’m looking for some jQuery plugin which would help me to achieve following goals:

1. Present user with some fixed size canvas which will be used for arranging “scene”
2. Allow for putting basic shapes, custom objects onto the scene
3. Support drag-and-drop for elements in scene
4. Support “snip to grid”

Any ideas?

Answer 1

You should try jqueryui, it provides lot of ui elements with great functionality like drag, drop etc and comes with browser compatibility for free.

To get grid snap like features, use following settings:

$(function() {
    $( "#draggable" ).draggable({
        containment: "parent",
        grid: [10, 20],
        drag: function() {
            // custom code
        }
    });

});

There are also more nice settings, like snap to other elements, etc. See full documentation here