다음은 jQuery UI Sortable 애니메이션을 시도한 것입니다.
https://codepen.io/anon/pen/YdMOXE
var startIndex, changeIndex, uiHeight;
$('ul').sortable({
'placeholder': 'marker',
start: function(e, ui) {
startIndex = ui.placeholder.index();
uiHeight = ui.item.outerHeight(true);//get offset incl margin
ui.item.nextAll('li:not(.marker)').css({
transform: 'translateY(' +uiHeight+ 'px)'
});
ui.placeholder.css({
height: 0,
padding: 0
});
},
change: function(e, ui) {
changeIndex = ui.placeholder.index();
if (startIndex > changeIndex) {
var slice = $('ul li').slice(changeIndex, $('ul li').length);
slice.not('.ui-sortable-helper').each(function() {
var item = $(this);
item.css({
background:'lightcoral',
transform: 'translateY(' +uiHeight+ 'px)'
});
});
} else if (startIndex < changeIndex) {
var slice = $('ul li').slice(startIndex, changeIndex);
slice.not('.ui-sortable-helper').each(function() {
var item = $(this);
item.css({
background: 'lightgreen',
transform: 'translateY(0px)'
});
});
}
startIndex = changeIndex
},
stop: function(e, ui) {
$('.ui-sortable-handle').css({
background: 'lightblue',
transform: 'translateY(0)'
})
}
});
불행히도 .NET과 안정적으로 작동하지 않습니다 tolerance: intersect. ( 50%요소가 겹칠 때 변경하기 위해 정렬 ). 포인터 위치를 통해서만 정렬하고 싶은 것 같습니다. 이것을 보여주는 비디오가 첨부되어 있습니다. https://gfycat.com/WatchfulPresentHedgehog
교차로 올바르게 작동하려면 어떻게해야합니까?
버그 # 8342를 볼 수 있습니다.
정렬 가능 : 정렬 가능한 옵션의 잘못된 동작 (또는 잘못된 문서)
tolerance: 'intersect'
나는 Munim Munna 주석에 링크 된 ( 이 답변 (수직 사용을 위해 수정했습니다) 및 이 답변 에서) 현재 해결 방법을 테스트 했으며 두 해결 방법 모두 올바르게 작동하지 않습니다 (매우 버그가 있음).
tolerance: 'pointer'(드래그 가능한 요소의 너비와 높이의 절반 크기) tolerance: 'pointer'와 함께 설정해야합니다 cursorAt: {top: height/2, left: width/2}.
tolerance : 'pointer'옵션을 사용하면 커서가 대상 요소에 들어가는 즉시 요소가 대상 요소를 대체 할 수 있습니다. 기본적으로 tolerance : 'intersect'항목이 다른 항목과 50 % 이상 겹치는 것으로 설정되어 있습니다. 그러나 불행히도이 옵션에 대한 버그가 있습니다 (내 답변의 상단 참조).
cursorAt옵션 과 함께 또는 옵션 없이 사용 하거나 값을 변경하십시오. 이 옵션은 정렬 요소 또는 도우미를 이동하여 커서가 항상 같은 위치에서 드래그되는 것처럼 보입니다. 좌표는 하나 또는 두 개의 키 조합을 사용하여 해시로 제공 될 수 있습니다 {top, left, right, bottom}..
여기에 대한 설명서입니다 tolerance옵션 및 대한 cursorAt옵션 .
29.01.2019에서 업데이트
jQuery UI Sortable에서 몇 가지 버그를 수정했습니다. 마지막 항목에서 드래그 할 때 이동하기에 충분한 공간이없는 경우. 이 코드를 추가하여이 버그를 수정했습니다.
<div style="clear: both; line-height: 500px"> </div>
정렬 가능한 요소 바로 뒤에.
var startIndex, changeIndex, uiHeight,
bRect = $("ul li")[0].getBoundingClientRect(),
width = bRect.right - bRect.left,
height = bRect.bottom - bRect.top;
$('ul').sortable(
{
tolerance: 'pointer',
cursorAt: {top: height/2, left: width/2}, //try to use it with and without this option
'placeholder': 'marker',
start: function(e, ui)
{
startIndex = ui.placeholder.index();
uiHeight = ui.item.outerHeight(true); //get offset incl margin
ui.item.nextAll('li:not(.marker)').css({
transform: 'translateY(' + uiHeight + 'px)'
});
ui.placeholder.css({height:0, padding:0});
},
change: function(e, ui)
{
changeIndex = ui.placeholder.index();
if(startIndex > changeIndex)
{
var slice = $('ul li').slice(changeIndex, $('ul li').length);
slice.not('.ui-sortable-helper').each(function()
{
var item = $(this);
item.css({
background:'lightcoral',
transform: 'translateY(' +uiHeight+ 'px)'
});
});
}
else if(startIndex < changeIndex)
{
var slice = $('ul li').slice(startIndex, changeIndex);
slice.not('.ui-sortable-helper').each(function()
{
var item = $(this);
item.css({
background: 'lightgreen',
transform: 'translateY(0px)'
});
});
}
startIndex = changeIndex
},
stop: function(e, ui)
{
$('.ui-sortable-handle').css({
background: 'lightblue',
transform: 'translateY(0)'
})
}
});body{color:white; font-family:Helveticasans-serif; padding:10px}
ul{float:left; width:300px; border-radius:6px}
ul:after{clear:both; content:''; display:table}
li
{
background: lightblue;
display: block;
position: relative;
padding: 80px 6px;
z-index: 1;
margin: 5px 20px;
overflow: hidden;
transition: transform .2s
}
.marker{opacity:0.0; transition:.2s height}
.ui-sortable-helper{transform:scale(.9)}<br><br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--
Fixing some bugs from jQuery UI Sortable:
on dragging from last item if after it
it has not enough space for moving
-->
<div style="clear: both; line-height: 500px"> </div>
<!--END of Fixing bugs-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>전체 페이지에서이 코드 스 니펫을 보는 것이 더 유용합니다 (스 니펫 오른쪽 상단의 링크 사용).
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras