2

jQuery UI 라이브러리를 사용하여 요소를 드래그하고 정렬합니다. 잘 작동하지만 입력 영역 (예 : 텍스트 영역)을 드래그 할 수 없습니다. 이 텍스트 영역은 사용할 수 없으므로 쓸 수 있어야합니다. 나는 약간의 주위를 봤 거든 내가이 문제가있는 유일한 사람이 아니라 것으로 나타났습니다. 거기에 대한 몇 가지 세미 솔루션이지만 그들은 모두 그것이 날짜입니다 보인다. (jQuery는 빠르게 발전합니다).jQuery 드래그 가능한 정렬 가능한 입력 요소

답변

0

이 작동합니다 :

HTML :

<div class="sortable-wrapper"> 
<ul id="sortable-list"> 
<div class="ui-state-default"> 
<textarea></textarea> 
</div> 
</ul> 
</div> 

jQuery를 :

$("#sortable-list").sortable(); 
$("#sortable-list").disableSelection(); 
+0

흠, 나는 이상한 것을 발견했습니다. 내가 말했듯이, 나는 textarea를 비활성화했지만, 아직 이것을하지 않고 다음과 같이 추가하면 $ ("# aaa"). draggable ({cancel : null}); ... 그것은 끌다 – Lahey

+0

그것은 독립적 인 드래그 ... – Lahey

0

당신은 내가 당신을 도울 수있을 것입니다 경우에 나를 위해 몇 가지 코드를 제공해야합니다.

(참고 : 텍스트 영역을 잡는 동안 항목을 드래그하려는 경우 선택을 켜고 끄기 위해 일부 스위치를 구현해야합니다. 내부를 클릭하여 항상 텍스트 영역을 편집 할 수있는 다른 방법을 제안합니다. 잡으려고 핸들을 사용합니다.)

<ul><li>을 포함하는 <ul><ol> 인 jQuery 정렬 식은 목록과 함께 작동합니다. 종종 이런 문제는 잘못된 html로 인해 발생합니다.

<ul class="my-items"> 
<li><textarea></textarea></li> 
<li><textarea></textarea></li> 
<li><textarea></textarea></li> 
<li><textarea></textarea></li> 
</ul> 

jQuery를

$(".my-items").sortable(); 

당신이 목록 항목 내에서 텍스트 선택을 비활성화 좋아하는 모든 텍스트 요소에 그것을 할 경우. 텍스트 영역이 아닙니다. p, span, div에 텍스트를 줄 바꿈하고 해당 요소에 대해서만 disableSelection()을 호출하십시오.

스크립트 문제를 해결하기 전에 html의 유효성을 검사하는 것이 좋습니다. 나는 http://validator.w3.org/ 서비스를 선호합니다.

관련 문제