0

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.

user3095198
  • 83
  • 10
  • possible duplicate of [jQuery Draggables and Droppables Positioning](http://stackoverflow.com/questions/2625873/jquery-draggables-and-droppables-positioning) – Sudhanshu Saxena Jul 25 '14 at 09:45

1 Answers1

1

Have you read Api for any solutions?

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

PhilGibson
  • 72
  • 8