无法在$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 } 
 } 
 ?>