요소를 드래그 한 후에 토글을하면 여전히 다른 요소에 영향을 미침

Question

왼쪽 하단에 고정되어있는 일부 정보 막대를 사용자가 내용을보기 위해 번갈아 가며 전환 할 수 있습니다.

각 div는 화면에서 드래그 할 수 있으며 두 번 클릭하면 원래 위치 인 으로 돌아갑니다.

지금까지의 문제는 div2 또는 div3 (코드 바이올린 코드 참조) 을 드래그 한 다음 토글 트리거를 클릭하면 원래 위치에서 위에있는 다른 div에 영향을줍니다.

div가 왼쪽 모서리에있을 때만 토글의 영향을 받고 싶지만 목록에서 끌어서 이동을 해제하려면이 동작을 비활성화하고 싶습니다.

드래그 한 후에 addClass를 시도했는데 더 높은 z- 인덱스 값을 설정하고 두 번 클릭 할 때 제거했지만 작동하지 않았기 때문에 어떤 이유로 모든 div에 영향을주었습니다.

아이디어가 있으십니까? 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의 샘플입니다 너 무슨 뜻이야? 나는 이것이 문제를 해결할 것이라고 생각한다.

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