Question

以下是我的代码，

<html>
<head>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    <script>
        $(function() {
        $("#image,#image1").draggable();

            $('#clickme').click(function(){

                $("#image,#image1").wrapAll("<div id='newimage'/>");
            });
        });
   </script>
</head>
<body>
    <div id="myimage" style="display:block;border:2px solid green;">
        <div id="image" style="display:block;">
            stack
        </div>
        <div id="image1" style="display:block;">
            is the best
        </div>
    </div>

   <span id="clickme">click me</span>
</body>
</html>

正如您在上面的代码中看到的那样... div image和image1是可拖动的，点击click me后，两个div都会被包含在另一个div中id newimage ...直到这里工作正常......但问题在于css风格..我想要“新形象”div来同时拥有“image”和“image1”..在你的例子里它只有一个div ............它应该是这样的......“图像”宽度是50px ..“image1”宽度是50px，它们之间的距离是30px（拖动后）...所以“newimage”的总高度应该是130px ......不应该把100％的宽度作为“身体”...如果有人看它......他应该知道两者都是“堆叠”和“是最好的”在同一个区块（新图像）......

拖动“image”和“image1”div后，

输出应该是这样的......

Answer 1

我已经对代码进行了更改。 JsFiddle

$(function() {
$("#image,#image1").draggable();

$('#clickme').click(function(){

    $("#image,#image1").wrapAll("<div id='newimage'/>");
    var w1 = $('#image').width();
    var w2= $('#image1').width();
    var pos1 = $('#image').position().left + w1; 
    var pos2 = $('#image1').position().left;
    var diffBtTwo = pos1 > pos2 ? pos1 - pos2 : pos2 - pos1;   
    var total = w1 + w2 + diffBtTwo + 20;
    var height = $('#image').position().top + $('#image1').position().top + 20;     
    $('#newimage').css('height',height);
    $('#newimage').css('width',total);


 });
});

在单个div中包含两个div

1 个答案: