Jquery Draggable + 앞에 가져 오기

나는 여러 사람과 채팅 할 수있는 여러 개의 채팅 DIV가있는 창을 가지고 있습니다.Jquery Draggable + 앞에 가져 오기

현재 채팅 DIV는 열어서 이동할 수 있지만 현재 선택 DIV가 앞에 표시되도록 설정할 수는 없습니다. 예 : DIV에서 마우스를 떼면 포 그라운드로 들어옵니다.

HTML :

<div id="1000000001" class="chatMessenger"> 
    <div class="chatMessengerContainer"> 
     </div> 
</div>

CSS :

div.chatMessenger { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 250px; 
    height: 300px; 
    background-color: white; 
    z-index: 100; 
    border: 1px solid black; 
}

JQUERY :

// JQUERY UI Draggable - Initialize 
    $('div#'+memberID).draggable({ 
     containment: $('div#chatWrapper') 
    }); 


    // JQUERY UI Draggable - Setting the Stack 
    $(document).on('mousedown','div.chatMessenger', function() { 
     alert('chat mouse down...'); 
     //var stack = $(".selector").draggable("option", "stack"); 
     $(this).draggable("option", "stack", ".products"); 
    });

경고 그래서이 올바른 요소를 발견하는 mousedown에 트리거합니다.

나는 드래그 가능한 Z- 인덱스와 스택을 살펴 봤지만 어느 것도 작동하지 못했습니다.

동시에 열리는 많은 채팅 DIV가 정면에 앉아야합니다.

thankyou.

출처

2012-09-30 Adam

이 on('mousedown') 함수 내에서

$('div.chatMessenger').not(this).css('z-index', '100'); 
$(this).css('z-index', '1000');

을 도움이 될 것입니다. 당신이 다시 다른 사람을 전면에 하나를 가져오고 재설정 할 몇 가지 draggables에 대한

출처

2012-09-30 21:56:30

brilliant - thankyou very much !! – Adam

당신은 환영합니다! –

감사합니다. 내게 잘 어울립니다. – sarath

는 :

$('.container').on('mousedown', function(event) { 
    $('.container').css('z-index','1'); 
    $(this).css('z-index','1000'); 
});

출처

2013-03-08 19:42:22 mbokil

스택이 저에게 효과적이지 않기 때문에 도움이되었습니다. – denski

내가 가장 쉬운 구현이 마지막 위치로 DOM에 사업부를 이동하는 것을 알아 냈다. 그래서 당신이 돔에서의 위치에 대해 신경 쓸 필요가 없다면 이것은 Z- 인덱스를 사용하지 않고 가장 쉬운 방법입니다. 일부 스티커 메모를 배치 할 때 이것을 사용합니다.

$("#chatWrapper").on('mousedown', '.chatMessenger', function() { 
    $(this).appendTo("#chatWrapper"); 
});

출처

2014-06-25 13:26:55 DaviideSnow

옵션이 있지만 - '스택'기존이 draggables이 같은 시작하면서 -

$('.draggable').draggable({ 
    stack: ".draggable" 
});

를하지만 제대로 작동하지 않는, 그래서 dragToFront는 Z-을 가지고 노는 작은 도서관을 썼다 색인. 다음은 plunkr 링크입니다

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

출처

2016-08-01 10:39:01

Jquery Draggable + 앞에 가져 오기

답변

관련 문제