拖动元素后切换仍然会影响其他元素

Question

我试图构建一些固定在左下方的信息栏，用户可以切换 以查看其中的内容。

每个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"); 
}); 

Answer 1

我不是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'); 
});