jquery - のCSSを更新ドロップ可能エリアにドロップした場合

Question

以下のようにjQueryを使用してドロップ可能を実装しました：

$( ".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/をチェックしてください。イベントの下には、要素をドロップした後に必要な変換を行うために使用できるドロップ イベントがあります。