$ AJAX後無法拖放

Question

如果我在csets.php頁面中拖動，我可以拖放項目。但是，當我使用onchange來更改類別項目。 $ AJAX之後的新項目和查詢無法拖動。

Csets.php

<div class="wrapper"> 
<div id="options"> 
    <?php 
    $strSQL = "SELECT * FROM item_head ORDER BY ihead_id DESC"; 
    $objQuery = mysqli_query($con, $strSQL); 
    while($row = mysqli_fetch_array($objQuery)){ 
    ?> 
    <img width="150" height="120" src="item_head/<?php echo $row['filesName'];?>" id="drag1<?php echo $row['head_id'];?>" class="drag"</img> 
<?php } ?> 
</div> 
</div> 

的JavaScript

function selectCa(){ 
var xmlhttp=new XMLHttpRequest(); 
var value = document.getElementById("sel1").value; 
xmlhttp.onreadystatechange=function(){ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
     document.getElementById("options").innerHTML=xmlhttp.responseText; 
    } 
} 
     xmlhttp.open("GET", "checkQuery.php?value="+value, true); 
     xmlhttp.send(); 
} 

CheckQuery.php

<?php 
$value = $_GET["value"]; 

//query head items 
if($value == "head"){ 
    $strSQL = "SELECT * FROM item_head ORDER BY ihead_id DESC"; 
    $objQuery = mysqli_query($con, $strSQL); 
    while($row = mysqli_fetch_array($objQuery)){ ?> 

    <img width="150" height="120" src="item_head/<?php echo $row['filesName'];?>" id="drag1<?php echo $row['head_id'];?>" class="drag"></img> 

<?php } 
    }else if($value == "body"){ 
    $strSQL = "SELECT * FROM item_body ORDER BY ibody_id DESC"; 
    $objQuery = mysqli_query($con, $strSQL); 
    while($row = mysqli_fetch_array($objQuery)){ 
?> 

<img width='150' height='120' src='item_body/<?php echo $row['filesName'];?>' id='drag1' class='drag'></img> 

<?php  
} 
}else if($value == "shoes"){ 
    $strSQL = "SELECT * FROM item_shoes ORDER BY ishoes_id DESC"; 
    $objQuery = mysqli_query($con, $strSQL); 
    while($row = mysqli_fetch_array($objQuery)){ 
?> 

<img width='150' height='120' src='item_shoes/<?php echo $row['filesName'];?>' id='drag1' class='drag'></img> 

<?php } 
} 
?> 

Answer 1

AJAX請求完成後，你應該重新啓動拖動功能。當通過AJAX加載內容時，Javascript不會將您稱爲初始可拖動功能的那些元素作爲目標。