Question

我正在开发一个页面，允许将一个div拖放listview项目到另一个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 code：

        <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中的其他位置。但是，我的代码在确定位置时似乎不准确，有时它不会捕获可放置的事件。

如果有人可以帮助我，我将非常感激。

提前致谢。

Answer 1

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

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

关键要素包括： - 自己的身份。这个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});

DEMO ：JSFiddle

如何使li项目在鼠标指针处下降

2 个答案: