jquery - 如何让 li 项目落在鼠标指针处

Question

我正在开发一个允许将 ListView 项从一个 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/

我可以将一个项目从打开的任务移动到分配的任务(将位置更改为鼠标指针的位置) 我希望能够将 Assigned Task 中的任务移动到该 div 中的不同位置。不过我的代码好像判断位置不准确，有时候没有捕捉到droppable事件。

如果有人能在这方面帮助我，我将不胜感激。

提前致谢。

Answer 1

看看 jQueryUI 可排序 ( http://jqueryui.com/sortable/ )

我有一个我最近一直在使用的标准模式。它包括一个 [保存订单] 按钮和消息槽。您可以拖动项目，然后单击保存按钮进行提交。

关键要素包括: - 自身的 id。这个 id 是 sortable 跟踪项目排序的方式。 - 在 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';
?>