html5, drag images and drop into right side of Div,images concatenate right-to-left

问题

I want images concatenate right-to-left manner. in following code when i put images into another Div, they are right aligned (dropped image always come to most right).however not in the manner I want.the new image should always come on the left of previous image. please help! owww yes ,one should imagine in "images" folder there are 1-9 numbers as .png file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        img
        {
            height: 100px;

            margin: 20px;
        }
        .draggable
        {
            filter: alpha(opacity=60);
            opacity: 0.6;
        }
        .dropped
        {
            position: static !important;
        }
        #dvSource, #dvDest
        {
            border: 5px solid #ccc;
            padding: 5px;
            min-height: 100px;
            width: 1120px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#dvSource img").draggable({
                revert: "invalid",
                refreshPositions: true,
                drag: function (event, ui) {
                    ui.helper.addClass("draggable");
                },
                stop: function (event, ui) {
                    ui.helper.removeClass("draggable");
                    var image = this.src.split("/")[this.src.split("/").length - 1];
                    if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                        alert(image + " dropped.");
                    }
                    else {
                        alert(image + " not dropped.");
                    } 
                } 
            });
            $("#dvDest").droppable({
                drop: function (event, ui) {
                    if ($("#dvDest img").length == 0) {
                        $("#dvDest").html("");
                    }
                    ui.draggable.addClass("dropped");
                    $("#dvDest").append(ui.draggable);
                }
            });
        });
    </script>
    <div id="dvSource">
        <img alt="" src="images/1.png" />
        <img alt="" src="images/2.png" />
        <img alt="" src="images/3.png" />
        <img alt="" src="images/4.png" />
        <img alt="" src="images/5.png" />
        <img alt="" src="images/6.png" />
        <img alt="" src="images/7.png" />
        <img alt="" src="images/8.png" />
        <img alt="" src="images/9.png" />

    </div>
    <hr />
    <div id="dvDest" align="right">
        Drop here
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/48897877/html5-drag-images-and-drop-into-right-side-of-div-images-concatenate-right-to-l

标签

html

image

drag-and-drop

alignment