jQuery ui draggable。克隆与阴影

Question

我正试图模仿这个

这是我的拖延：

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

和我的div

<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(100,100,200,0.4)" });

我把它放在可拖动的选择器外面但仍然不能正常工作。

Answer 1

而不是：

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

使用此：

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

Answer 2

尝试

$(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
        }
    });
});

小提琴http://jsfiddle.net/code_snips/ndb8G/