JQueryUI- Can options take more than one parameter?

Question

I'm trying to make my draggables snap to each other as well as their containing div. Is this possible? this works:

$($element).draggable({         
            snap: true          
        })

but this (and variations of it) will not:

$($element).draggable({
            snap: true, '#mainwindow'
        })

Anyone know how to give options more than one parameter?

Answer 1

From the jQueryUI website, the example with snap on draggable() has the following code:

<script type="text/javascript">
 $(function() {
  $("#draggable").draggable({ snap: true });
  $("#draggable2").draggable({ snap: '.ui-widget-header' });
  $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
  $("#draggable4").draggable({ grid: [20,20] });
  $("#draggable5").draggable({ grid: [80, 80] });
 });
</script>

So I think snap: '#mainwindow' might do the trick. Also, I haven't tried this so I'm not sure if its possible (others can correct me since I'm not familiar with jQueryUI, although it looks awesome) but what if you create a callback function to handle the snap event:

$($element).draggable({
   snap: function(event, ui) {/* insert functionality */}
});

Answer 2

$($element).draggable({
            snap: true, '#mainwindow'
        })

This example isn't legal JavaScript/JSON. You would need something like...

{
  snap: [true, '#mainwindow']
}

Which I don't think draggable() will except.

I'm trying to make my draggables snap to each other as well as their containing div.

Try giving each draggable and the containing div(s) a class like "snappable" and pass

{
  snap: ".snappable"
}