重新排列xml节点

Question

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

我还将图像放在网页上的网格中，这样如果用户想要删除任何图像。如果用户删除了一个图像，则将其从xml文件中删除并重新保存xml文件。

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

我知道我应该将图像放在Mysql数据库而不是xml文件中，但它不是，我担心它不可能！这可能是最好的方式。有没有办法允许用户在页面上的缩略图周围移动（拖动），重新排序并保存xml节点的最新位置？

她是我的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>

这是我的Javascript代码，用于显示幻灯片：

<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>