jquery - droppable() 背景颜色

Question

使用 jquery-ui 的拖放，我希望将一个元素（div）的 bg 颜色更改为另一个元素（div）的 bg 颜色，当它被拖放到第一个元素的顶部时。背景颜色是从数据库中动态检索的，因此必须使用内联样式。我在 .droppable({ * }) 中使用哪些选项/参数？

<?PHP echo  "<script type="text/javascript">
    $(function()
    {
        var " . $id . " = " . mysql row . "
        $('#first').draggable({revert:true});
        $('#second').draggable({revert:true});
        $('#third').draggable({revert:true});
        $('#fourth').draggable({revert:true});
        $('#fifth').draggable({revert:true});
        $('#target').droppable({
            drop: function( event, ui ) {
            $( this ).class('background-color', '" . $id . "');

        });
    });
    </script>"; ?>

Answer 1

这是一个将background-colora 的 a设置为放置在其上的 thedroppable的示例。background-colordraggable

​$('​​​​​​​.draggable').draggable({
    revert: true
});
$('.droppable').droppable({
    accepts: '.draggable',
    drop: function(event, ui) {
        var bgColor = $(ui.draggable).css('backgroundColor');
        $(this).css('backgroundColor', bgColor);
        $(ui.draggable).remove();
    }
});​​​​​​​​​​​​​​​​​​​

现场示例：http: //jsfiddle.net/EyKnr/

如果您background-color从数据库中获取，您只需将bgColor我的示例中的变量替换为适当的值。