Response title
This is preview!
jQuery UI Draggable, Droppable, Resizable Combo
in Using jQuery UI
•
13 years ago
I have around 10 draggables and 1 droppable. You can drag and drop the widgets into the droppable. In droppable you can drag the widget and resize it. That's fine but when I add few widgets, resize them and add another widget, it overlaps on another widget in the droppable. I can't figure out how to stop this behavior.
I want to stop draggables from overlapping in the droppable.
The JS code I'm using to achieve above:
- $("#squeezePage #squeezeWidgets .squeezeWidget").draggable({
- helper: 'clone',
- containment: '#squeezePage',
- handle: '.top',
- zIndex: 5000,
- });
- $("#squeezePage #droppable").droppable({
- tolerance: 'fit',
- accept: '#squeezePage #squeezeWidgets .squeezeWidget',
- drop: function(event, ui) {
- $(this).append($(ui.draggable).clone());
- $(this).find('.squeezeWidget .top').hide();
- $(this).find('.squeezeWidget').draggable({
- handle: '.widgetHeading',
- containment: '#squeezePage #droppable',
- scroll: true,
- grid: [20,20],
- snap: true,
- refreshPositions: true,
- snapMode: 'outer'
- });
- $(this).find('.squeezeWidget .widgetContent').slideDown('fast');
- $(this).find('.squeezeWidget .widgetContent').resizable({
- maxWidth: 600,
- minHeight: 60,
- minWidth: 180,
- grid: 20,
- resize: function(event, ui) {
- var height = $(this).height() - 30;
- $(this).find('.edit').css('height', height+'px').css('line-height', height+'px');
- },
- });
- }
- });
Thanks,
Haris
2
