下面是我的代码，
<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 包含两个“图像”和“image1”..在你的例子中它只有一个 div ......应该是这样的......“image”宽度是 50px..“image1”宽度是 50px 和它们之间的距离是 30px(拖动后)...所以“newimage”的总高度应该是 130px...它不应该将 100% 的宽度作为“body”...如果有人看的话..他应该知道两者都是“堆栈”和“是最好的”在同一个 block 中(新图像)......
在拖动“image”和“image1”div 后输出应该是这样的...
最佳答案
我修改了代码。 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);
});
});
关于javascript - 在一个 div 中包含两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21623344/