Javascript jQueryUI可拖动。带阴影的克隆

我试着模仿这个

这是我的拖鞋：

$( function() {
    $('#sidebar .question-constructor').draggable({
        connectToSortable:'#preview',
        scroll: false,
        helper : 'clone',
        cursorAt: { top: 56, left: 200 } 
    });
});

我的部门呢

<div class="question-constructor" style="border-style:solid; border-width:5px;">
    <label for="textbox" style="display: inline-block;" >Question: </label>
    <input id="textbox" type="text" />
</div>

问题:

我的当前输出如下所示：

离我的目标很远。但现在我想知道，我如何才能像我的目标图像一样，在可拖动的克隆中添加阴影

更新：

我尝试使用以下代码段：

$（'.question constructor'）.animate（{boxShadow:“0 0 5px 3px rgba（100100200,0.4）”）

我把它放在可拖动选择器外面，但仍然不工作。
而不是这个：

$('.question-constructor').animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });

使用以下命令：

$('.question-constructor').css('boxShadow','4px 2px 17px 5px grey');

试一试

Fiddle
是否可以不使用.css？如果我要使用css，我希望被类引用。还有别的办法吗？
$(function () {
    $('.question-constructor').draggable({
        connectToSortable: '#preview',
        scroll: false,
        helper: 'clone',
        start: function (e, ui) {
            $(ui.helper).css('boxShadow', '0 0 5px 3px rgba(100,100,200,0.4)'); //change css 
        },
        cursorAt: {
            top: 56,
            left: 200
        }
    });
});