CODEWITHSUNDEEP
jqueryjquery-ui
user3095198
user3095198

Reputation: 83

Draggable/Droppable positioning with Jquery UI

I'm using a simple Draggable/Droppable Jquery UI function, that I want to modify in certain ways. The first thing I want to do is restrict the two(or more) draggable objects of being put upon one another in the droppable item. So when I move them to the droppable I want them to stay apart with a 5px free in every direction and not be placed on one another. Is this possible?

$(function() {

    $( ".draggable" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

    $( ".droppable" ).droppable({

        tolerance: 'fit',
        over: function(event, ui) {
            $('.ui-draggable-dragging').addClass('hoverClass');
        },
        out: function(event, ui) {
                    $('.ui-draggable-dragging').removeClass('hoverClass');
        },

        drop: function( event, ui ) {
            $( ".droppable" ).addClass('dropClass');
        }
    });
});

http://jsfiddle.net/xMFK8/

Thanks.

Upvotes: 0

Views: 54

Answers (1)

PhilGibson
PhilGibson

Reputation: 72

Have you read Api for any solutions?

http://api.jqueryui.com/droppable/#event-drop

Upvotes: 1

Related Questions