javascript - jQuery ui 可拖动。带阴影的克隆

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/