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

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