Question

所以我得到了一个可拖动的名字列表。我有一个复选框列表，帮助我们可以过滤这些名称。选中复选框后，我进行了ajax调用。这是我的列表的样子（它是一个手风琴）：

        <div id="myAccordion">
        <?php
                echo "<h3>Names</h3>";  
                echo '<ul class="source">';
                echo '<div id="getData"></div>';    
                echo '<div id="hideData">'; 
                $sql = "SELECT * FROM user ORDER BY `username` ASC ";
                $result = $conn->query($sql);       
                if ($result->num_rows > 0) 
                {
                    // output data of each row
                    while($row = $result->fetch_assoc()) 
                    {  
                        $name = $row["username"];
                        $user_type = $row["user_type"];
                        echo"<li class='item'><span class='closer'>x</span>".$name."</li>";                     
                    }
                    }
                    else 
                    {
                        echo "0 results";
                    }   
                echo '</div>';                      
                echo '</ul>';
        ?>  
        </div>

所以在调用ajax之后我调用filter.php并打印出来：

<?php
require_once('inc/database_connection.php');
include 'model/model.project.php';
if($_POST['user_type'])
{
    //unserialize to jquery serialize variable value
    $type=array();

    parse_str($_POST['user_type'],$type); //changing string into array 

    //split 1st array elements
    foreach($type as $ids)
    {
        $ids;
    }
    $types=implode("','",$ids); //change into comma separated value to sub array
    echo "<br>";
    $result = getUserTypeChecked($types);
?>
    <div id="getData">
    <?php 
    while($rows=mysqli_fetch_array($result))
    {                   
        //echo $rows['username']."<br>";  
        $name = $rows["username"];
        echo '<ul id="source">';
        echo"<li class='item'><span class='closer'>x</span>".$name."<div class='green'></div></li>";    
        echo '</ul>';

    }       
    ?>  
    </div>
<?php
}
?>

所以问题是在ajax调用之后名称停止可拖动。我怎样才能做到这一点？

修改

好的，这是我对手风琴的js：

<script>
    $("#myAccordion").accordion({heightStyle:"content", collapsible:true});
    $("#myAccordion li ").draggable({
        appendTo: "body",
        helper: "clone",
         refreshPositions: true,
         start: function (event, ui) {
            sourceElement = $(this);
        },          
    });
</script>

和ajax电话：

<script>
$(document).ready(function(){
    //$('#getData').hide();
    $('.ids').on('change',function(){ //on checkboxes check
        //sending checkbox value into serialize form
        var hi=$('.ids:checked').serialize();
        if(hi){
            $.ajax({
                type: "POST",
                cache: false,
                url: "filter.php",
                data:{user_type:hi},
                success: function(response){
                    //$('#getData').show();
                    document.getElementById('getData').style.display = "block";
                    document.getElementById("getData").innerHTML = response;
                    $('#hideData').hide();
                }
            });
        }
        else
        {
            document.getElementById('getData').style.display = "none";
            $('#hideData').show();
        }
    });
});
</script>

Answer 1

JS在页面上使用加载的DOM。这意味着当你调用sort函数时，HTML元素必须出现在页面上。

让我们试着了解这里发生了什么？

首先加载所有html元素。
JS触发器和所有拖动功能到加载的DOM。
Ajax调用以获取新数据并替换旧DOM。
现在拖动功能停止工作。
为什么？因为JS拖动功能在旧DOM上运行，目前它已被删除。
需要在新加载的DOM上再次调用drag函数。

注意：确保在调用JS拖动功能之前必须加载元素或HTML。

Answer 2

在成功函数中附加新的html后重新初始化插件：

document.getElementById("getData").innerHTML = response;
$('#hideData').hide();
 $("#myAccordion").accordion({heightStyle:"content", collapsible:true});
    $("#myAccordion li ").draggable({
        appendTo: "body",
        helper: "clone",
         refreshPositions: true,
         start: function (event, ui) {
            sourceElement = $(this);
        },          
    });

如何在ajax调用过滤后使项目可拖动

修改

2 个答案: