5

I am working on a page that will allow Drag n Drop listview items from one div to another.

I have done moving an item from one to another, but I got stuck in moving an item within a div (i.e. changing position of the item)

The jquery code is shown below:

$("#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>

I created a JSFiddle to demonstrate the problem I have http://jsfiddle.net/lightbringer/SDF4m/

I can move an item from Open Task to Assigned Task (changing position to the position of mouse pointer) I would like to be able to move the tasks in Assigned Task to a different location within that div. However, my code seems to be inaccurate in determining the position, and sometimes it does not capture the droppable event.

If someone could help me on this one I would be very grateful.

Thanks in advance.

4

2 回答 2

0

看看 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';
?>
于 2013-09-18T05:11:35.100 回答
0

要正确定位您的 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

于 2013-09-18T05:22:04.160 回答