javascript - $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();
}

检查查询.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 不会定位那些在调用初始可拖动函数之后加载的元素。