拖動元素後切換仍然會影響其他元素

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