如何解决如何像文字处理程序一样拖放div-没有间隙或重叠
我正在尝试重新创建每个文字处理器中提供的基本功能,该功能使您可以将一个div(Div1)拖到另一个div(Div3)上,并让Div1在Div3之后插入自己而不重叠。相反,Div1恰好在我放下的地方着陆,与Div3重叠,并且在页面的可见流中留有空隙。但是,Chrome调试器的DOM视图显示它已正确插入,并且CSS检查器没有任何指示(我可以看到)将其放置在页面上,就好像它被定位为绝对位置一样。
因此,想象一个页面以四个编号的div开始,每个div整齐并自动间隔。然后想象一下将Div1拖到Div3上,希望除了顺序为Div2,Div3,Div1,Div4之外,其他看起来一样。但相反,它看起来像这样:
我正在使用jquery和jquery.ui。
这是HTML:
<body>
<div id="bigcontainer-test">
<div class="row-test level0" level="0" id="1">1</div>
<div class="row-test level0" level="0" id="2">2</div>
<div class="row-test level0" level="0" id="3">3</div>
<div class="row-test level0" level="0" id="4">4</div>
</div>
</body>
页面加载后会调用JavaScript:
function makeDraggable(row) {
console.log("Made draggable");
$(row).draggable({
revert: false,axis: "y",// only vertical
containment: 'document'
});
}
function makeDroppable(row) {
console.log("Made droppable");
$(row).droppable({
drop: function (event,ui) {
$(ui.draggable).insertAfter(row);
}
});
}
这是CSS(没有我随机尝试过的200万个变体):
.row-test{
overflow: visible;
display: block;
margin: auto;
background-color: yellow;
border: 3px solid white;
position: relative;
}
#bigcontainer-test{
margin: auto;
display: block;
}
关于我在做什么错的任何想法吗?谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。