2017-01-21 2 views
1

jQuery UI를 정렬 가능으로 사용하고 있으며 조건이 true 일 경우 끌기를 방지하려고합니다. 나는이 솔루션을 보았습니다 : https://stackoverflow.com/a/18470982/3758078하지만 끌기가 끝나기 전에 드래그를 중지합니다. 다른 솔루션은 sort: 이벤트에서 return false;을 사용하도록 권장하지만 이는 단순히 오류를 반환합니다.시작하기 전에 끌기 취소

$(elements).sortable({ 
     start: function() { 
      if(true) { 
       //cancel dragging before it begins 
      } 
     } 
    }); 
+0

당신은 심지어 시작 방지하기 위해 "사용 안 함"방법을 사용할 수 있습니까? –

답변

2

다음은 start 콜백을 사용한 작업 예제입니다.
당신은 드래그 기능을 활성화/비활성화 할 수 allowdrag 확인란을 사용할 수 있습니다

$(document).ready(function() { 
 
    $("#draggable").draggable({ 
 
     revert: "invalid", 
 
     start: function(e) { 
 
     if (!$('#allowdrag').is(':checked')) { 
 
      e.preventDefault(); 
 
     } 
 
     } 
 
    }); 
 
    $("#Dropable").droppable({ 
 
     activeClass: "ui-state-highlight", 
 
     drop: function (event, ui) { 
 
      alert("dropped!"); 
 
     }, 
 
     tolerance: 'fit' 
 
    }); 
 
});
#draggable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
} 
 
#Dropable { 
 
    height:300px; 
 
    width:400px; 
 
    border: 2px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<input type="checkbox" id="allowdrag" /><label for="allowdrag"> Allow drag</label><br /> 
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
</div> 
 
<div id="Dropable">Droppable area</div>

당신은 당신이 가능하게하기 위해 확인 원하는에 if (!$('#allowdrag').is(':checked')) { 부분을 변경할 수 있습니다/드래그 옵션을 비활성화 .

+0

sortable();을 (를) 사용하고 있습니다. 이 예제에서는 draggable을 사용합니다. 시작 이벤트에서 e.preventDefault를 사용하고 콘솔 오류가 발생했습니다. – guub

+0

@ guub 정확히 동일하게 작동해야합니다. 'e' 변수를'function (e) {..}'정의에 추가 했습니까? – Dekel

+0

@guub 확인하셨습니까? – Dekel

관련 문제