如何使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>

我創建了一個JSFiddle來演示我遇到的問題http://jsfiddle.net/lightbringer/SDF4m/

我可以將項目從Open Task移動到Assigned Task（將位置更改為鼠標指針的位置）我希望能夠將Assigned Task中的任務移動到該div中的其他位置。 但是，我的代碼在確定位置時似乎不准確，有時它不會捕獲可放置的事件。

如果有人可以幫助我，我將非常感激。

提前致謝。

Answer 1

看看jQueryUI sortable（ http://jqueryui.com/sortable/ ）

我有一個我最近一直在使用的標准模式。 它包括[保存訂單]按鈕和消息槽。 您可以拖動項目然后單擊保存按鈕進行提交。

關鍵元素包括： - 自身的id。 這個id是可排序跟蹤項目排序的方式。 - 在tbody上使用sortable - 拋出一個通用的ajax調用來更新任何表上的顯示順序。

HTML / PHP
<a href='' id='saveorder' disabled='disabled' class='btn btn-info'>Save Order</a>
<span id='message'></span>

echo "<tbody>"; 
foreach ($array as $row) {
    echo "<tr id='id_{$row['doccategoryid']}'>";
                 // middle of row
    echo "</tr>"; 
} 
echo "</tbody>"; 


JQUERY
    $('#saveorder').click(function(event) {
        var order  = $("#list tbody").sortable("serialize");
        $('#message').html('Saving changes..'+order);

        var table   = 'doccategories';
        var tableid     = 'doccategoryid';
        var tableorder  = 'displayorder';
        var limit       = 1500;
        var page        = 1;

        var params = order+"&limit="+limit+"&page="+page+"&table="+table+"&tableid="+tableid+"&order="+tableorder;
        // console.log(params);

        $.post("/admin/update_displayorder.php", params, function(theResponse){
            // $('#message').html(theResponse);
        });
        event.preventDefault();
    });

    $("#list tbody").sortable({
        opacity: 0.6,
        cursor: 'move',
        update: function() {
            $('#saveorder').removeAttr('disabled');
            $('#message').html('Changes not saved');
            $('#message').css("color","red");
        }
    });

AJAX CALL
<?php
require_once(__DIR__."/../common/globals.php");

// must be logged in
if (!isloggedin() || !isadmin()) {
    echo 0;
    die;
}
session_write_close();  // done with session

$table        = $_POST['table'];
$tableid    = $_POST['tableid'];
$newOrder     = $_POST['id'];
$page         = $_POST['page'];
$per         = $_POST['limit'];
$order        = $_POST['order'];

$counter     = ($page-1) * $per + 1;

// echo "page: {$page} per: {$per} counter {$counter}";

  foreach ($newOrder as $recordIDValue) {
    $sdb->query  = "UPDATE {$table} SET {$order} = {$counter}
                    WHERE {$tableid} = " . (int) $recordIDValue;
    $sdb->firequery();
    $counter++;
    // echo "{$table} saving: {$id} = {$recordIDValue} :{$query} {$counter} ".mysql_error();
  }

echo ' '.$counter.' Changes were saved - refresh to update order column';
?>

Answer 2

要正確定位您的droppables，您應該從最終坐標中減去一半的寬度和高度：

var aTag = ui.draggable.find("a");
var linkOffset = aTag.offset();
aTag.removeAttr("style").css({left:event.pageX - linkOffset.left - aTag.width()/2, top:event.pageY - linkOffset.top - aTag.height()/2});

演示 ： JSFiddle