Question

我希望图像以从右到左的方式连接。在下面的代码中，当我将图像放入另一个Div时，它们是右对齐的（丢失的图像总是最右边）。但是不按照我想要的方式。新图像应始终位于前一图像的左侧。请帮忙！是的，人们应该想象一下＆＃34;图像＆＃34;文件夹中有1-9个数字作为.png文件。

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

html5，拖动图像并放入Div的右侧，图像从右向左连接

0 个答案: