jquery draggable and droppable - 부모님 상속 중지 CSS

설명하기가 어렵지만 내 페이지에는 draggable 및 droppable 요소가 있습니다. droppable 요소 중 일부는 이미 내부에 드래그 가능한 요소가 있지만 대부분은 그렇지 않습니다.jquery draggable and droppable - 부모님 상속 중지 CSS

droppables 위에 마우스를 올리면 배경 이미지가 표시되어 그 위에 마우스를 올리면됩니다. 그러나 draggable을 다른 droppable로 이동하면 새로 이동 된 draggable 위로 마우스를 올려 놓으면 배경 이미지가 들어있는 OLD droppable에 배경 이미지가 나타납니다.

여기 보이는 경우 내 문제가 나타날 수 있습니다. - 노란색 상자 중 하나를 움직여보고 이동 한 후에 마우스를 가져가보십시오. 배경 이미지가 초기 위치에 나타납니다. http://liquidlizard.net/

누구든지이 문제를 해결하는 방법을 알려 줄 수 있습니까?

$('.draggable').draggable({start: function() {var initialposition = ???}}); 
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'}); 
function handleDropEvent(event, ui) { 

}

CSS :

.empty:hover{background-image:url(../img/tilehover.png);}

기본적으로 모든 것을 내가

<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div> 
<div id="row-2col1" class="empty"><div class="position"></div></div> 
<div id="row-2col2" class="empty"><div class="position"></div></div>

JS를 사용하고 그것을 여기

편집을 :) 코드의 일부입니다 감사하겠습니다 항목을 가리키면 배경 이미지를 보여주는 '빈'클래스가 있습니다.

출처

2013-02-18 Zaphod Beeblebrox

아마도 jQuery-UI가 이전 DOM 객체를 캐시하기 때문일 수 있습니다. "update"또는 "stop"(드래그 가능한 매개 변수)에서 배경 (css())을 다시 지정할 수 있습니다. –

후손을위한 질문에 코드를 게시하십시오. – Blazemonger

@Allendar 답변에 시간을내어 주셔서 감사합니다. 좀 더 설명해 주시겠습니까, 무슨 뜻인지, 나는 자바 스크립트를 처음 사용합니다. 나는 당신이 업데이 트에 대한 의미를 알고 매개 변수를 중지합니다. (다른 것들에 대해 drop 이벤트를 사용하고 있습니다.)하지만 배경을 어떻게 재 지정했는지 모르겠습니다. –

문제는 드래그 요소가 didv의 자식이기 때문에, 그래서 당신은, .empty:hover를, 해당 요소에 CSS 규칙을 empty 클래스를 할당 할 때 드래그 요소가 온 사업부의 자식이다 연극이 시작됩니다.

는이 문제를 방지하려면 다음과 같이 각 상자 내부에 두 번째 사업부를 넣어 :

클래스 empty와 사업부의 내부에 새로운 사업부를 추가합니다.

그래서이 선 : (모든 그와 같은 것들)이에

<div id="row-2col3" class="empty"><div class="position"></div></div>

변경 : (내가 쉽게 읽을 수 있도록 그것을 아래로 끊었다.)

<div id="row-2col3" class="empty"> 
    <div class = "elementContainer">  <!-- This is added..--> 
     <div class = "wordHolder"></div> <!-- ...............--> 
    </div>        <!--................--> 
    <div class="position"></div> 
</div>

그런 다음 추가 당신의 CSS이 :

.elementContainer { 
    position:relative; 
} 

.wordHolder { 
    position:absolute; 
    width:65px; 
    height:65px; 
}

그리고 마지막으로, 당신의 CSS 규칙을 대체 .empty:hover을 elementContainer:hover으로 설정하면 제대로 작동합니다.절대 위치 요소가있는 첫 번째 부모 요소에 상대적으로 위치

어떻게 그리고 왜

이 w3schools 말을 인용 작동, 정적이 아닌 다른 위치. 이러한 요소가 없으면, 상기 수용 블록 <html>이다

가

그래서 상대 속성 세트 .elementContainer을 사용하여 클래스 wordHolder와의 절대 위치 요소에 대한 우리의 용기로서 기능한다. 그리고 그들은 규칙적인 흐름에서 제거되고 다른 모든 요소들은 존재하지 않는 것처럼 행동하기 때문에 방해가되지 않습니다.

현재 요소의 위치에 대한 자세한 읽을 수 있습니다 :이 도움이 http://www.w3schools.com/css/css_positioning.asp

희망을!

출처

2013-02-19 06:46:16 Stephen

jquery draggable and droppable - 부모님 상속 중지 CSS

답변

관련 문제