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

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

1 个答案: