Jquery draggables:删除元素会更改其他被删除元素的位置
当元素被放置/删除(通过从一个DIV拖动到另一个DIV),然后删除被删除的DIV中的元素时,其中一些元素正在改变位置。Jquery draggables:删除元素会更改其他被删除元素的位置
这是一个测试场景: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',
});
我怎样才能避免这种情况?
我发现,元素被放置在相对位置的起始位置。即使有些被移除,我怎样才能让他们坚持下降的位置?
我发现了两个类似的附近的问题,但没有一个令人满意的答案:
Remove in Jquery divs with draggables and resizables
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
(或relative
.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'});
我只是做了一些修改在你的jsfiddle演示,它似乎是工作
我的编辑:
<div id="dropwin"></div>
<div id="dragables">
<div class="outer"><div id="d1" class="d"></div></div>
<div class="outer"><div id="d2" class="d"></div></div>
<div class="outer"><div id="d3" class="d"></div></div>
<div class="outer"><div id="d4" class="d"></div></div>
</div>
<button id="b1">Remove d1</button>
<button id="b2">Remove d2</button>
<button id="b3">Remove d3</button>
<button id="b4">Remove d4</button>
而且在CSS:
#dropwin { width: 300px; height: 300px; border: 1px solid #f00;}
#dragables { width: 300px; height: 70px; border: 1px solid #00f; }
.d { width: 50px; height: 50px; margin: 10px; display: inline-block; }
#d1 { background: #f00; position:absolute; }
#d2 { background: #ff0; position:absolute; }
#d3 { background: #f0f; position:absolute; }
#d4 { background: #0ff; position:absolute; }
.outer{ margin:1px 2px 0 0; float:left; width:60px;}
谢谢你,我试过你在这里http://jsfiddle.net/BillyG/TcYHW/9/的解决方案,它看起来不错,即使“dropwin”居中。我将在我的应用程序中执行此操作,看看它是否可以解决问题。但为什么你在这个外部类的顶部和右边添加了这个边界? – 2012-03-10 03:20:34
忘记添加位置:绝对上#d1-#d4 http://jsfiddle.net/BillyG/TcYHW/10/ – 2012-03-10 03:29:18
没有边距,divs最初会互相折叠。我的意思是当代码第一次加载时,四个div将会彼此重叠。现在很高兴工作。你能接受答案吗?)欢呼。 – Kaushtuv 2012-03-10 03:31:35
谢谢你,你的解决方案看起来像我需要什么,但前提是“dropwin”是(静态)在左上角。如果你尝试这个http://jsfiddle.net/BillyG/5S92K/2/,其中DIV居中并水平改变浏览器窗口大小,那么被拖放的拖动不会保持固定,它们会移动。相对于dropwin-box,定位必须是绝对的。一个提示,如何解决这个问题? – 2012-03-10 03:15:13
'#dropwin'和'#dragables'需要有'position:relative'来进行绝对定位才能做正确的事情。 http://jsfiddle.net/5S92K/3/ – 2012-03-10 05:51:38
谢谢,它解决了迄今为止最好的方法。我更喜欢你的解决方案,因为它不需要额外的标签作为Kaushtuvs的解决方案。 – 2012-03-10 17:50:37