jquery - マウスポインタでliアイテムをドロップする方法

Question

リストビュー項目をある div から別の div にドラッグ アンド ドロップできるようにするページに取り組んでいます。

ある項目から別の項目への移動は完了しましたが、div 内での項目の移動 (つまり、項目の位置の変更) で行き詰まりました。

jquery コードを以下に示します。

$("#taskAssigned").droppable({
            accept: "#wrapper_taskOpen li, #wrapper_taskAssigned li",
            drop: function(event, ui) {
            // accepts items from taskOpen
                if (ui.draggable.parent().parent().parent().attr("id") == "taskOpen") {
                    ui.draggable.detach().appendTo($("#taskassignlist")).removeAttr("style").attr("style", "position:relative;");
                    var linkOffset = ui.draggable.find("a").offset();
                    ui.draggable.find("a").removeAttr("style").css({left:event.pageX - linkOffset.left, top:event.pageY - linkOffset.top});
                }
            // accept internal drops (change position of the stickynote)
                else if (ui.draggable.parent().parent().parent().attr("id") == "taskAssigned") {
                    ui.draggable.detach().appendTo($("#taskassignlist")).removeAttr("style").attr("style", "position:relative;");
                    var linkOffset = ui.draggable.find("a").offset();
                    ui.draggable.find("a").removeAttr("style").css({left:event.pageX - linkOffset.left, top:event.pageY - linkOffset.top});
                }
            }
        });

HTML コード:

        <div id="taskOpen">
            <div data-role="header" data-theme="e">
                <h5>Open Tasks</h5>
            </div>                  
            <div id="wrapper_taskOpen">
                <ul id="taskopenlist" class="stickynote">
                    <li id="draggable">
                        <a href="#" id="pos">
                            <h3>Title #2</h3>
                            <p>Text Content #2</p>
                        </a>
                    </li>
                    <li id="draggable">
                        <a href="#" id="pos1">
                            <h3>Title #3</h3>
                            <p>Text Content #3</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="taskAssigned">
            <div data-role="header" data-theme="e">
                <h5>Assigned Tasks</h5>
            </div>
            <div id="wrapper_taskAssigned">
                <ul id="taskassignlist" class="stickynote">
                </ul>
            </div>
        </div>
        <div id="taskClosed">
            <div data-role="header" data-theme="e">
                <h5>Closed Tasks</h5>
            </div>
            <div id="wrapper_taskClosed">
                <ul id="taskcloselist" class="stickynote">
                </ul>
            </div>
        </div>

http://jsfiddle.net/lightbringer/SDF4m/の問題を示すために JSFiddle を作成しました

項目を Open Task から Assigned Task に移動できます (位置をマウス ポインターの位置に変更します) Assigned Task のタスクをその div 内の別の場所に移動できるようにしたいと考えています。ただし、私のコードは位置を決定する際に不正確なようで、ドロップ可能なイベントをキャプチャしない場合があります。

誰かがこれについて私を助けることができれば、私はとても感謝しています.

前もって感謝します。