0

我试图模仿这个在此处输入图像描述

这是我的可拖动:

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

我将它放在可拖动选择器之外,但仍然无法正常工作。

4

2 回答 2

0

而不是这个:

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

用这个:

$('.question-constructor').css('boxShadow','4px 2px 17px 5px grey');
于 2013-11-07T10:31:09.757 回答
0

尝试

$(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/

于 2013-11-07T10:35:23.360 回答