0

我正在尝试构建一些固定在左下角的信息栏，用户可以切换以查看那里的内容。

每个 div 都可以在屏幕上拖动，双击它会回到原来的位置。

到目前为止它工作正常，我的问题是在拖动 div2 或 div3 （参见小提琴中的代码）并单击切换触发器后，它会影响原始位置上方的其他 div。

我希望只有当他在左角时，div 才会受到切换的影响，但我想在将其拖出列表后禁用此移动。

我试图在拖动后添加类，它设置了更高的 z-index 值 - 并在双击时将其删除但它没有工作，由于某种原因它影响了所有 div。

有任何想法吗？

这是 jsfiddle 中的一个示例：我的示例代码

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>

查询：

$('.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");
});
4

1 回答 1

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');
 });
于 2013-04-30T18:44:13.090 回答