拖动元素后切换仍然会影响其他元素
问题描述:
我试图构建一些固定在左下方的信息栏,用户可以切换 以查看其中的内容。拖动元素后切换仍然会影响其他元素
每个div都可以在屏幕上拖动,双击时他会返回到原来的位置 。
到目前为止它的工作正常,我的问题是,在拖动div2或div3(见小提琴中的代码) 并单击切换触发器后,它会影响位于原始位置上方的其他div。
我希望只有当div在左边角落时才会受到切换的影响,但是我想在将它拖出列表之后禁用此移动。
我试图在拖动后添加类,它设置了更高的z-index值 - 并在双击时将其删除,但它没有起作用,出于某种原因它影响了所有的div。
任何想法?
这里是一个的jsfiddle样本:my sample code
CSS:
#container
{
position:fixed;
bottom:0;
left:0;
z-index:15;
}
.bardiv
{
width:300px;
background-color:orange;
border:1px solid black;
}
HTML:
<div id='container'>
<div id='1' class='bardiv'>drag/double click me - div 1/<a class ='toggleme' href='#'>toggle </a>
<div class='conn'>content</div>
</div>
<div id='2' class='bardiv'>drag/double click me - div 2 /<a class ='toggleme' href='#'>toggle </a>
<div class='conn'>content</div>
</div>
<div id='3' class='bardiv'>drag/double click me - div 3 /<a class ='toggleme' href='#'>toggle </a>
<div class='conn'>content</div>
</div>
</div>
的Jquery:
$('.conn').hide();
$('.toggleme').click(function() {
$(this).next('div').slideToggle('fast');
});
$(".bardiv").draggable({ opacity: 0.7, cursor: 'move', cancel: '.toggleme' });
$(".bardiv").dblclick(function() {
$(this).animate({ left: 0, top: 0 }, "slow");
});
答
我不是100%肯定你的意思是什么?我认为这可能会解决这个问题。
的jsfiddle:http://jsfiddle.net/y9Y8s/2/
$('.conn').hide();
$('#container').css('min-height', $('#container').height());
$('.toggleme').click(function() {
$(this).next('div').slideToggle('fast');
});
$(".bardiv").draggable({
opacity: 0.7,
cursor: 'move',
cancel: '.toggleme',
stop: function (event, ui) {
$(this).css('position', 'absolute');
}
});
$(".bardiv").dblclick(function() {
$(this).animate({ left: 0, top: 0 }, "slow");
$(this).css('position', 'relative');
});
很好的解决方案 - 但为什么一个空格保持拖出DIV后? – 2013-04-30 19:38:47
由于容器有jQuery设置的最小高度,空白仍然存在。问题是,如果您未设置最小高度并将可拖动div拖到容器外部,则该位置将被设置为绝对值,并且容器会将其高度降低为被设置为绝对位置的元素的高度。 js无法显示行为:http://jsfiddle.net/y9Y8s/3/ 如果仔细观察,可以看到div在每个元素被拖出容器时跳转。 – 2013-04-30 21:30:13
谢谢你的男人! – 2013-04-30 21:44:05