JQuery 可排序迭代元素

Question

我有这个网站使用 JQuerys sortable 功能，这使我可以在列表上拖动项目。列表中的每个项目都有一个与该项目相对应的按钮，并连接到站点上的图像。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);

代码知道拖拽什么item，问题是alt属性只是设置为等于1right now，应该设置为用户拖拽item的位置对应的值。有人知道这怎么可能吗？提前致谢。如果您希望我为您提供更多代码，请告诉我。

编辑：

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

/* 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 代码中

当前状态：

阿贾克斯：

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

即使物品被丢弃，您也可以连接到停止处，然后将所有“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)   
         });
     }
});

这是一个小提琴。