jquery - jQuery でのリスト アイテムの移動に関する問題

Question

私はこれを約1日理解しようとしてきましたが、あまり進歩していません. 2 つのリストを作成し、ダブルクリックしてそれらの間でリスト項目を移動したいと考えています。1 つのイベントが「クリック」で、もう 1 つのイベントが「dblclick」である場合、それを機能させることができますが、それは私が望むものではありません。両方の方法で「dblclick」イベントをアタッチすると、リスト項目は移動せず、現在のリスト内で並べ替えられます。これが私の問題を示す JSFiddle です。私は現在、1つのイベントが「クリック」で、もう1つのイベントが「dblclick」であるようにセットアップしています。ライブ関数のパラメーターを「クリック」に変更して、他のハンドラーと一致させると、私が抱えていた問題が表示されます。

HTML

<div id="orig">
<ul>
    <li class="original">one</li>
    <li class="original">two</li>
    <li class="original">three</li>
</ul>
</div>
<div id="moved">
    <ul>

    </ul>
</div>

CSS

#orig {
    width: 40%;
    height: 300px;
    overflow: auto;
    float: left;
    border: 1px solid black;
}

#moved {
    width: 40%;
    height: 300px;
    overflow: auto;
    float: right;
    border: 1px solid black;
}

jQuery

$(function() {
    $(".original").click(function(){
        this.className = "moved";
        $("#moved ul").append(this);
    });

    $(".moved").live("dblclick", function() { 
        this.className = "original";
        $("#orig ul").append(this);
    });

});

ここにJSfiddleがあります