javascript - JQuery 可排序迭代元素

Question

我有一个使用 JQuerys 可排序功能的网站，这使我可以将项目拖动到列表上。列表中的每个项目都有一个与该项目相对应的按钮，并连接到网站上的图像。当用户将项目拖动到其所在位置以外的其他位置时，我需要更改该图像 z-index 。现在我只是更改 alt 属性以使自己更容易，但我的代码如下所示:

var data = $(this).sortable("serialize");
var change_zindex = 1;
var drag_id_tmp = $(ui.item).attr("id");
var drag_id = drag_id_tmp.split("-")[1];

document.getElementsByClassName('item' + drag_id)[0].setAttribute("alt", change_zindex);

代码知道拖动的是哪个项目，问题是 alt 属性现在刚刚设置为 1，并且应该设置为与用户将项目拖动到的位置相对应的值。有人知道这怎么可能吗？提前致谢。如果您希望我为您提供更多代码，请告诉我。

编辑:

在我的数据库中工作，如下所示:

/* Insert the parameter values */
        $i = 0;

        foreach ($_POST['item'] as $value) {

            /* Register a prepared statement */
            if ($stmt = $mysqli->prepare('UPDATE house_room1 SET z = ? WHERE ref_id = ?')) {

                /* Bind parametres */
                $stmt->bind_param('ii', $i, $value);

                /* Execute the query */
                $stmt->execute();

                /* Close statement */
                $stmt->close();

            } else {
                /* Something went wrong */
                echo 'Something went terribly wrong' . $mysqli->error;
            }
            $i++;
        }

我相信它位于使用序列化的数组中，还将序列化添加到了 AJAX 代码中

当前状态:

AJAX:

$(document).ready(function () {
            $("#sortable").sortable({
        axis: "y",
        stop: function (event, ui) {

            var data = $(this).sortable("serialize");

             var change_zindex = 1;
             var drag_id_tmp = $(ui.item).attr("id");
             var drag_id = drag_id_tmp.split("-")[1];
             document.getElementsByClassName('item' + drag_id)[0].setAttribute("alt", item);

             $('ul li').each(function(index, item){
                 $(item).children('span').attr('alt', drag_id + 1)
             });

            $.ajax({
                data: data,
                type: "POST",
                url: "database/update_settings_sort.php"
            });
        }
    });
    $( "#sortable" ).disableSelection();
});

我正在使用的 HTML: 对于具有 z-index 的图像:

echo '<img src="' . $src . $rotation .'.png" class="item' . $item_number . '" 
rel="'.$rotation.'" alt="'.$z.'"style="position:absolute; left:' . $x . 'px; top:' . $y . 
'px; z-index:'. $z . ';">'; if ($x != 0) { echo'</a>'; }

实际列表的html:

echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this,\''. $arr['src']. '\')">';

Answer 1

即使该项目被丢弃，您也可以 Hook 到停止点，然后将所有“alt”标签重新编号为您想要的任何值。在下面的示例中，我将列表项列为 1-7。一旦删除某个项目，它就会迭代列表项目并对它们重新编号。

$( "#sortable" ).sortable({

     // Hook into stop event of sortable
     stop: function( event, ui ) {

         // Iterate over all of the list items
         $('ul li').each(function(index, item){

              // Set each items "alt" attribute to it's corresponding spot in the list.
              // Added +1 so that it uses numbers 1-7 instead of 0-6
              $(item).children('span').attr('alt', index + 1)   
         });
     }
});

Here's a fiddle for it.