jquery - jQuery - 透明でドラッグ可能なテキスト

Question

背景画像付きの透明なテキストを用意するというアイデアがあったので、テキストを通して画像を見ることができます。インターネットで長い間検索した後、この css ソリューションを見つけました: http://jsfiddle.net/7WP6f/

コード：

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div id="logo">
            <span>t</span>
            <span>e</span>
            <span>x</span>
            <span>t</span>
</div>


CSS:
#logo
{
    color: black;
 -webkit-text-fill-color: transparent;
 background: url('http://d24w6bsrhbeh9d.cloudfront.net/photo/6730501_700b_v1.jpg') repeat 0 0;
 -webkit-background-clip: text;
 background-size: 0;
 -webkit-background-size: auto;
 -o-background-size: 0;
}

#logo span
{
    font-family: 'Trebuchet MS';
    font-size: 300px;
    cursor: pointer;
}

問題は、これらの文字をドラッグ可能にして、文字の背景が「移動」するようにしたいのですが、jQuery UI ドラッグ可能を追加するだけでは機能しません (上記の例で確認できます。jQuery コマンドのコメントを外すだけです)。

この効果を達成する方法はありますか？私ができる唯一の解決策は、白いキャンバス（Photoshopで）に透明な文字本体を持つ文字のPNGを作成し、すべての文字に背景画像を追加し、オブジェクトがドラッグされている間にjquery.backgroundpos.jsで背景を移動することでした。これは機能しますが、透明な文字の周囲の白い部分に問題があります (文字を別の文字に移動すると表示されます)。

提案をありがとう