当放置/放置元素(通过从一个 DIV 拖动到另一个 DIV),然后删除放置的 DIV 中的一个元素时,其中一些元素会更改位置。
这是一个测试场景:http://jsfiddle.net/TcYHW/8/ http://jsfiddle.net/TcYHW/8/
以及主要代码:
<div id="dropwin"></div>
<div id="dragables">
<div id="d1" class="d"></div>
<div id="d2" class="d"></div>
<div id="d3" class="d"></div>
<div id="d4" class="d"></div>
</div>
$(".d").draggable({
containment: '#dropwin',
stack: '#dragables div',
cursor: 'move',
});
我怎样才能避免这种情况?
我发现,元素放置在相对于起始位置的位置。即使有些被移除,我怎样才能让它们粘在掉落的位置?
我发现了两个相似的问题,但没有令人满意的答案:
在 Jquery div 中删除,可拖动且可调整大小 https://stackoverflow.com/questions/7514337/remove-in-jquery-divs-with-draggables-and-resizables
jQuery 可拖动删除而不改变其他元素的位置 https://stackoverflow.com/questions/5114638/jquery-draggable-removing-without-changing-position-of-other-elements
您需要对元素进行定位absolute
。那么被删除的盒子就不会影响其他元素的流动。
你可以只使用 css 来定位它们absolute
:
.d {
width: 50px;
height: 50px;
margin: 10px;
display: inline-block;
position: absolute;
}
但这样你就必须手动放置每个盒子。诀窍是让它们保持在适当的位置static
(or relative
after .draggable()
完成),然后使用 javascript 设置它们的位置并将它们设置为absolute
定位:
$('.d').each(function() {
var top = $(this).position().top + 'px';
var left = $(this).position().left + 'px';
$(this).css({top: top, left: left});
}).css({position: 'absolute'});
Demo: http://jsfiddle.net/jtbowden/5S92K/ http://jsfiddle.net/jtbowden/5S92K/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)