자리 표시 자 텍스트를 jQuery UI로 빈 정렬 가능으로 표시

비어있는 정렬 가능 텍스트에 자리 표시 자 텍스트를 추가하는 적절한 해킹 방법이 있습니까? sortabel 위로 항목을 끌 때 표시되는 자리 표시 자의 공백을 의미하지는 않습니다. 나는 "여기에 아이템 버리기"와 같은 텍스트를 의미합니다. 목록이 비어있을 때만 표시됩니다.자리 표시 자 텍스트를 jQuery UI로 빈 정렬 가능으로 표시

내 자신의 자리 표시 자 요소를 표시하려고했지만 연결된 draggable을 정렬 가능으로 드래그 할 때 jQuery UI가 이상 또는 부족 이벤트를 보내지 않으므로 올바르게 표시되지 않습니다.

편집 : 예제 코드 : over 이벤트가 발생되어이 예제 코드에서 어떤 이유 http://jsfiddle.net/RRnD8/

. out은 아직 없습니다. 그러나 실제 코드에서는 over 대신 change을 사용할 수 있습니다.

편집 2 : 흠, out 이벤트 은입니다. 그러나 드래그 된 요소가 정렬 가능 요소에서 제거되기 전에 트리거됩니다. 다음을 통해 수정했습니다.

e.sortable({out: function() { 
    setTimeout(realOutHandler.bind(this), 0); 
}});

더 깨끗한 방법이 있나요?

출처

2012-06-14 panzi

당신이 자바 스크립트이 티켓에 몇 가지 예를 드롭한다. 귀하의 질문에 대답하는 것이 훨씬 쉽습니다. –

@NicholasDiPiazza jsfiddle에 대한 링크를 추가했습니다. 물론 실제 코드에서와 똑같은 동작을하지는 않습니다. 어쨌든 "여기 내 버그는 무엇입니까?"라고 물어보고 싶지 않습니다. 빈 sortable에 자리 표시 자 텍스트를 표시하는 것이 가장 좋습니다. – panzi

좋습니다. 이 코드 예제는 질문의 명확성을 돕습니다. 감사합니다. –

over 이벤트를 사용하여 자리 표시 자 텍스트를 숨기려면 out 이벤트를 표시하고, stop 제거하려면 이벤트를 사용하십시오.

$("#sortable").sortable({ 
    revert: true, 
    over: function() { 
     $('.placeholder').hide(); 
    }, 
    out: function() { 
     $('.placeholder').show(); 
    }, 
    stop: function() { 
     $('.placeholder').remove(); 
    } 
}); 
$("#draggable").draggable({ 
    connectToSortable: "#sortable", 
    helper: "clone", 
    revert: "invalid" 
});

라이브 예-http://jsfiddle.net/JfGxy/2/

출처

2012-06-14 16:26:33

그래, 어떤 이유로 진짜 코드에서 최소한의 예제처럼 작동하지 않습니다. 어쨌든, 나는 함께 패치를 할 수 있었다. (내가 말했듯이, + setTimeout을 사용해서). – panzi

.placeholder는 어디에서 왔습니까? –

위대한 작품, 감사합니다! –

SASS 방법 :

#sortable 
    &:empty { 
     padding: 0; 
     min-height: 50px; 
     z-index: 999; 
     margin-bottom: 10px; 
     margin-right: 25px; 
     border: 4px dashed #CCC; 
     background-color: #F5F5F5; 

     &:after { 
     color: #888; 
     content: "Drop items here"; 
     display: block; 
     min-height: inherit; 
     line-height: 50px; 
     text-align: center; 
     font-size: 18px; 
     font-weight: 700; 
    } 
}

출처

2016-11-24 16:08:11 max

자리 표시 자 텍스트를 jQuery UI로 빈 정렬 가능으로 표시

답변

관련 문제