Javascript 重新排列xml节点

我有一个显示图像幻灯片的应用程序。非常基本。幻灯片从xml文件中读取以加载图像

我还将图像放置在页面的网格中，因此如果用户想要删除任何图像，他们可以删除。如果用户删除图像，它会将其从xml文件中删除并重新保存xml文件

我想找到一种方法（如果可能的话），允许用户在页面上拖动缩略图（或以任何方式），以按他们希望的顺序放置，然后重新保存xml文件

我知道我可能应该在Mysql数据库中而不是xml文件中保存图像，但事实并非如此，而且恐怕不可能！那可能是最好的办法。是否有一种方法允许用户在页面上的缩略图周围移动（拖动），重新排序并将xml节点保存到最新位置

她是我的xml文件

下面是显示幻灯片的Javascript代码：

$（函数（）{
$.ajax({
键入：“获取”，
url:“myPhotos.xml？”+Math.random（），
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（“image”）.each（函数（n）//查找xml文件中的每个图像
{
var companyID=$（this.attr（“idtrack”）；//公司ID
var picURL=$（this.attr（“src”）；//图像的路径
var picDesc=$（this）.attr（“desc”）；//Pic说明
//这将从xml将图像附加到幻灯片放映中
$（“#照片广告”）。附加（“”）；
//这显示了带有广告的文本
$（'a:has（span）'）.html（函数（）{
if（this.picDesc==“0”）{
$（'span'，this.stop（）.fadeIn（）；
};
$（'span'，this.fadeIn（）；
}，函数（）{
$（'span'，this.stop（true，false）.fadeOut（）；
});
});
$（“#照片广告”）。循环({
外汇：“褪色”
});
}
});
});

你能粘贴你的javascript代码吗谢谢你的回复！我放置了javascript代码，但这只是为了显示幻灯片我正在寻找一种方法，使用户能够按照自己的方式更改xml文件的顺序！：）

<?xml version="1.0" encoding="UTF-8"?>
<slideshow>
  <image idtrack="users uploaded file" src="myPhotosResized/594836175.jpg" desc="" original-img-src="myPhotosResized/594836175.jpg"/>
  <image idtrack="users uploaded file" src="myPhotosResized/858077808.jpg" desc="" original-img-src="myPhotosResized/858077808.jpg"/>
  <image idtrack="users uploaded file" src="myPhotosResized/515348713.jpg" desc="" original-img-src="myPhotosResized/515348713.jpg"/>
  <image idtrack="users uploaded file" src="myPhotosResized/852896045.jpg" desc="" original-img-src="myPhotosResized/852896045.jpg"/>
  <image idtrack="users uploaded file" src="myPhotosResized/770816037.jpg" desc="" original-img-src="myPhotosResized/770816037.jpg"/>
</slideshow>

<script type="text/javascript">
  $(function() {
    $.ajax({
        type: "GET",
        url: "myPhotos.xml?"+Math.random(),
        dataType: "xml",
        success: function(xml) {
            $(xml).find("image").each(function(n) // Finds each image in the xml file
                {
                    var companyID = $(this).attr("idtrack"); // Company ID
                    var picURL = $(this).attr("src"); // Path of image
                    var picDesc = $(this).attr("desc"); // Pic description

                    // This appends the images to the slide show from the xml
                    $("#photo-ads").append('<a id="' + companyID + '" href="' + picURL + '"><span class="desc"><p class="ads-text">' + picDesc + '</p></span><img src="' + picURL + '"/></a>');

                    // This shows the text with the ad
                    $('a:has(span)').html(function() {

                        if (this.picDesc == '0') {
                            $('span', this).stop().fadeIn();
                        };
                        $('span', this).fadeIn();
                    }, function() {
                        $('span', this).stop(true, false).fadeOut();
                    });
                });
            $('#photo-ads').cycle({
                fx: 'fade'
            });
        }
    });
});
</script>