정렬 가능한 요소는 가운데 정렬을 사용하여 여백 : 0 자동 정렬 왼쪽 정렬

Question

정렬 가능한 상자가 컨테이너 내에서 margin: 0 auto을 사용하여 가운데 정렬되는 Jquery UI를 정렬 할 수 있습니다.

박스가 수직으로 만 이동할 수 있도록 정렬 가능한 axis: 'y' 설정을 사용합니다. 정렬하는 동안

는, 드래그 상자이 문제가 발생하지 않습니다 axis: y로 드래그하여 컨테이너

의 왼쪽으로 이동, 위젯을 정렬 할 수있는 관련이있을 것으로 보인다.

나는이 jsfiddle의 버그를 복제했습니다. 어떤 아이디어?

Answer 1

드래그 할 때 jQuery UI가 position:absolute을 적용합니다. 요소가 가장 가까운 위치에있는 요소 인 top:0, left:0 또는 창에 배치되도록하는 것이 문제입니다.

이 문제를 해결할 수있는 옵션 중 하나는 helper option을 사용하여 드래그하기 위해 맞춤 위치 지정 도우미를 사용하는 것입니다. 다음과 같이 쉽게 원래의 요소에 도우미 상대 위치에 대한 JQuery와 UI position() 유틸리티 메소드를 사용할 수있다 :

$('#container').sortable({ 
 
    axis: 'y', 
 
    helper: function(event, elm) { 
 
    return $(elm).clone().position({ 
 
     my: "left", 
 
     at: "left", 
 
     of: elm 
 
    }); 
 
    } 
 
});

* { /*for stack snippet demo*/ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 200px; 
 
    text-align: center; 
 
    height: 300px; 
 
    border: 1px solid green; 
 
    position: relative; 
 
} 
 
.draggable { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    margin: 10px auto; 
 
    cursor: move; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="container"> 
 
    <div class="draggable"></div> 
 
    <div class="draggable"></div> 
 
</div>