jquery - Jquery UI - 重複した DOM 要素を作成し、クラスを追加および削除する

Question

私は、自動車業界で押しつぶされたカエルとして知られているウィジェットに取り組んでいます。その基本的には、損傷があったことを示すアイコンが付いた平らな車の画像が配置されています。ユーザーがクリックしたときに複製したい HTML 画像アイコンのリストがあるので、この HTML アイコンのコピーがコンテナー div 内に配置され、車の画像上の場所にドラッグできます。損傷が見られます。

コピーが作成され、親コンテナー div の子になったら、クラス「ドラッグ可能」を追加してドラッグできるようにし、クラス「カエルキー」を削除して、このコピーの別の複製を作成しないようにしますクリックしたとき。

問題は、要素がクリックされると「カエルキー」クラスを削除するのに苦労していることです...

これが私のコードです...

    <!-- Script -->
<script type="text/javascript">

    $(function () {
        $(".draggable").draggable();
    });

    $(document).ready(function () {

        // when an element is clicked, a duplicate is created that can be dragged.
        // where it is placed is where the coordinates will be saved

        $(".frog-key").click(function () {

            var copy = $(this).clone(true);

            // add a unique ID
            copy.attr("id", copy.attr("data-type") + "-1");

            // remove class frog-key as we dont want a duplicate of this copy
            copy.removeClass("frog-key");

            // add the class draggable  - so it can be dragged - jquery UI
            copy.addClass("draggable");

            // add this copy to the container div
            $("#squashed-frog-container").append(copy);

        });

    })
</script>

HTML

<div id="squashed-frog" class="large">
<div id="squashed-frog-container">
    <img id="squashed-frog-art" src="/Content/Design/img/ART_squashed_frog_large.png">
</div>
<ul class="unstyled" id="squashed-frog-key">
    <li><span class="pointer sprite frog-key dent" data-type="Dent_Bodyshop"></span>Dent <small>(Bodyshop)</small></li>
    <li><span class="pointer sprite frog-key dent-repair" data-type="Dent_SmartRepair"></span>Dent <small>(Smart Repair)</small></li>
    <li><span class="pointer sprite frog-key scratch" data-type="Scratch_Bodyshop"></span>Scratch <small>(Bodyshop)</small></li>
    <li><span class="pointer sprite frog-key scratch-repair" data-type="Scratch_SmartRepair"></span>Scratch <small>(Smart Repair)</small></li>
    <li><span class="pointer sprite frog-key chip" data-type="Scratch_Chip"></span>Chip</li>
    <li><span class="pointer sprite frog-key multi-chip" data-type="Multiple_Chips"></span>Multiple Chips</li>
    <li><span class="pointer sprite frog-key paint" data-type="Paint_OffColour"></span>Paint <small>(Off Colour)</small></li>
    <li><span class="pointer sprite frog-key paint-repair" data-type="Paint_PreviousRepair"></span>Paint <small>(Previous Repair)</small></li>
    <li><span class="pointer sprite frog-key paint-fallout" data-type="Paint_Fallout"></span>Paint <small>(Fallout)</small></li>
    <li><span class="pointer sprite frog-key rust" data-type="Rust"></span>Rust</li>
    <li><span class="pointer sprite frog-key wheel-Scuff" data-type="Wheel_Scuff"></span>Wheel Scuff</li>
    <li><span class="pointer sprite frog-key sidewall" data-type="Sidewall_Damage"></span>Sidewall Damage</li>
    <li><span class="pointer sprite frog-key broken" data-type="Broken"></span>Broken</li>
</ul>