Setting connectToSortable

Setting connectToSortable

Hi,

I have two draggables functions which are almost the same except for the connectToSortable function.

I tried to set connectToSortable depending on a data attribute, but without success. So is is not possible? Because it would save much of code. Thanks in advance

Code example:
  1. $('.if-module-drag-to').draggable({
        appendTo: 'body',
        helper:'clone',
        connectToSortable: '.dg-modules',
        start: function(event, ui) {
            $('.drag-box').hide('slow'); //hide Interface menu
            $('.dg-modules').css({'border': '2px dashed green'});
        },
        stop: function(event, ui) {
            $('.drag-box').show('slow'); //show Interface menu
            $('.dg-modules').css({'border': 'none'});
        }
    });

    $('.if-content-module-drag-to').draggable({
        appendTo: 'body',
        helper:'clone',
        connectToSortable: '.dg-content-modules',
        start: function(event, ui) {
            $('.drag-box').hide('slow'); //hide Interface menu
            $('.dg-content-modules').css({'border': '2px dashed green'});
        },
        stop: function(event, ui) {
            $('.drag-box').show('slow'); //show Interface menu
            $('.dg-content-modules').css({'border': 'none'});
        }
    }); 



























And this I tried:

  1. $('.if-drag-to').draggable({
        appendTo: 'body',
        helper:'clone',
        connectToSortable: '.'+$(this).attr('data-connect')+'',
        start: function(event, ui) {
            $('.drag-box').hide('slow'); //hide Interface menu
            $('.dg-modules').css({'border': '2px dashed green'});
        },
        stop: function(event, ui) {
            $('.drag-box').show('slow'); //show Interface menu
            $('.dg-modules').css({'border': 'none'});
        }
    });