jquery - 更新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;
    }

Answer 2

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

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

所以：

CSS

.myVal ul li{
    //styles
}

也是个好主意:)

Answer 3

查看http://jqueryui.com/demos/droppable/在 events 下有一个 drop 事件，您可以在删除元素后使用它来执行任何您想要的转换。