jQuery를 UI의 정렬 가능한의 connectWith jQuery를 모바일

가 jQuery를 모바일에서 작동하지 않는 jQuery를 UI 정렬 가능한을 가진 ul HTML 목록에 li 요소를 이동 실패 (드래그 작동하지만 ul가 li 요소를 허용하지 않습니다). jQuery Mobile을 가져온 행에 주석을 달면 작동합니다. 주석을 다시 해제하면 작업이 중단됩니다. 하지만 내 프로젝트에는 jQuery Mobile이 필요하다. 또한 끌어 올리면 요소의 모양이 변경됩니다 (Firefox 29).jQuery를 UI의 정렬 가능한의 connectWith jQuery를 모바일

HTML 파일 here의 스크린 샷을 찾을 수 있습니다.

컨텍스트 : jQuery Mobile을 사용하여 하이브리드/웹 응용 프로그램을 만들고 있습니다. 그것은 교육용 앱이며 한 가지 운동 유형에서 사용자는 일부 용어를 올바른 목록으로 드래그해야하지만 목록에 새로운 li 태그를 허용하지 않기 때문에 목록에 용어를 삽입해도 작동하지 않습니다. 시나리오를 단순화하여 하나의 목록으로 이동하는 용어가 하나만 있도록했습니다.

<html> 
    <head> 
<title>jQueryUI Sortables</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<!-- remove this line and the example will work (Firefox) --> 
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<!-- but I need jQuery Mobile in my project! --> 

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="jquery.ui.touch-punch.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
    $("#part_0").sortable({ 
     connectWith: "#col_0" 
    }); 
    $("#col_0").sortable({ 
     connectWith: "#part_0" 
    }); 
    }); 
</script> 
<style> 
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; } 
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;} 
</style>  
</head> 
<body> 
<ul id="part_0" class="smallList"> 
    <li class="part">Drag this</li> 
</ul><br /><br /><br /><br /> 
<ul id="col_0" class="bigList"> 
    <li class="part">Into</li> 
    <li class="part">This</li> 
    <li class="part">List</li> 
</ul> 
</body> 
</html>

출처

2014-06-15 user3742403

당신이 샘플을 제공 할 수 [jsfiddle] (http://jsfiddle.net) 또는 뭔가를 ..? –

jsfiddle : [link] (http://jsfiddle.net/YCL3x/)을 추가했지만 어떤 이유로 그곳에서 작업 중입니다. jsfiddle없이 HTML 파일에 직접 게시 한 코드를 넣으면 Firefox에서 작동하지 않습니다. 하지만 해결 방법을 발견, 내 대답은 아래 참조하십시오. – user3742403

시도한 후에 마침내 해결 방법을 발견했습니다. 이유는 모르지만 jQuery Mobile을 사용하면 jQuery Mobile없이 jQuery UI를 사용하는 경우 ul 태그를 float: left으로 설정해야합니다. 필요하지 않습니다. 나는 분명 생각하지만 CSS에이 한 줄을 추가하면 끌기 다시 작업하게하지 않습니다 문제를 보여

<style> 
/* BEGIN INSERTION: */ 
ul { float: left; } 
/* END INSERTION */ 

li { margin: 0px; padding: 10px; float:left; border-radius: 5px; } 
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;} 
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;} 
</style>

출처

2014-06-24 18:59:28 user3742403

jQuery를 UI의 정렬 가능한의 connectWith jQuery를 모바일

답변

관련 문제