在放入可放置区域时更新<li>的css </li>

时间:2012-05-17 15:03:30

标签: jquery css

我已经使用jQuery实现了一个droppable,如下所示:

$( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 

            } 
        }); 

我将<li>元素拖入可放置区域。我可以将新的css应用到刚删除时添加的<li>,那么文本是否包含新的CSS样式,而不仅仅是文本被放入该区域?

3 个答案:

答案 0 :(得分:2)

或者您可以(因为li将从新容器中对样式进行处理)

/*OnlyCss*/
    .myVal ul li{
        color:red;
        background:blue;
    }

没有必要使用jQuery,但是如果你仍然想要(但这只有在被删除的元素必须与其余部分不同时才有意义 - 在新容器中 - ):

注意: 假设.draggable元素是 li

/*javascript*/
    $( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 
                  ui.draggable.css({'color':'blue','background':'red'});
            } 
        }); 

甚至

/*javascript+css*/
    $( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 
                 ui.draggable.addClass('justDropped');
            } 
        }); 
   /*combined with*/ 
    .justDropped{
        color:red;
        background:blue;
    }

答案 1 :(得分:1)

$( ".myVal" ).droppable({ drop: function( event, ui ) 
        { 
              $(this).find("li").addClass("newClass");
        } 
    }); 

我认为这就是你所需要的。

所以:

<强> CSS

.myVal ul li{
    //styles
}

也是个好主意:)

答案 2 :(得分:0)

查看http://jqueryui.com/demos/droppable/在事件下,有一个drop事件,您可以在删除元素后执行任何转换。