jquery - 当放入可放置区域时更新 <li> 的 css

Question

我已经使用 jQuery 实现了 droppable，如下所示:

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

            } 
        }); 

我正在拖动一个 <li>元素进入可放置区域。我可以将新的 CSS 应用到 <li>刚刚在删除时添加，因此文本包含新的 css 样式，而不是仅将文本拖放到该区域中？

Answer 1

或者你也可以(因为 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;
    }