jQuery 사용
-
21-08-2019 - |
문제
나는 jQuery에 새로왔다. Datalist에게 SortableUi를 사용하고 싶습니다. Datalist의 각 행에는 일련 번호가있는 텍스트가 포함되어 있습니다. Sortable UI를 성공적으로 사용했습니다. 그러나 이제 정렬하는 동안 일련 번호가 아닌 텍스트를 이동하고 싶습니다. 여기 내 예제 코드가 있습니다. DIV는 각 LI의 왼쪽 상단 모서리에 일련 번호를 표시합니다. 이제 3 번째 Li와 함께 2 차 Li를 드래그하려고하면 3 번째 항목은 규칙으로 2 위로 이동하지만 문제는 두 번째 항목 DIV (첫 번째로드와 같은 DIV 이전) 이후에 발생한다는 것입니다. 결과적으로 Div의 스타일에 따라 .. Serial No 1 및 2는 첫 번째 항목 위치에서 중첩됩니다.
정렬하는 동안 해당 LI를 직후에 DIV를 유지하는 데 사용할 수있는 방법이 있습니까?
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">test A</li>
<div class="DisplayOrder">1</div>
<li class="Decide_Rank_Item_Li">Test B</li>
<div class="DisplayOrder">2</div>
<li class="Decide_Rank_Item_Li">Test C</li>
<div class="DisplayOrder">3</div>
<li class="Decide_Rank_Item_Li">Test D</li>
<div class="DisplayOrder">4</div>
</ul>
정렬 전 이미지 :
이제 약간의 움직임을 시작하면 우선 순위가 포함 된 div가 오른쪽 장소에 표시되는 것을 볼 수 있습니다.
두 번째 항목을 3 위로 정렬 한 후
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">test A</li>
<div class="DisplayOrder">1</div>
<div class="DisplayOrder">2</div>
<li class="Decide_Rank_Item_Li">Test C</li>
<li class="Decide_Rank_Item_Li">Test B</li>
<div class="DisplayOrder">3</div>
<li class="Decide_Rank_Item_Li">Test D</li>
<div class="DisplayOrder">4</div>
</ul>
정렬 후 이미지 :
이미지를 볼 수 없습니다
Li와 Div의 스타일은 여기에 표시됩니다.
.Decide_Rank_Item_Li
{
position: relative;
display: block;
border-color: #C0C0C0;
border-width: 1px;
border-style: solid;
vertical-align: bottom;
width: 110px;
height: 100px;
float:left;
background-color: #F8F8F8;
}
.DisplayOrder
{
position: relative;
display: block;
float: left;
top: 5px;
left: -105px;
z-index: 100;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 0px;
margin: 0px;
width: 0px;
clear: right;
color: #808080;
}
해결책
조금 더 우아한 대체 솔루션을 생각했습니다. http://jsbin.com/udina
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
li {
width: 100px;
height: 100px;
float: left;
background: #F8F8F8;
border: 1px solid #C0C0C0;
list-style-position: inside;
color: #C0C0C0;
}
div {
text-align: center;
color: #C0C0C0;
font-size: 120%;
}
.placeholder {
list-style-type:decimal;
}
</style>
</head>
<body>
<ol>
<li><div>Test Content A</div></li>
<li><div>Test Content B</div></li>
<li><div>Test Content C</div></li>
<li><div>Test Content D</div></li>
<li><div>Test Content E</div></li>
<li><div>Test Content F</div></li>
<li><div>Test Content G</div></li>
<li><div>Test Content H</div></li>
<li><div>Test Content I</div></li>
<li><div>Test Content J</div></li>
<li><div>Test Content K</div></li>
<li><div>Test Content L</div></li>
<li><div>Test Content M</div></li>
<li><div>Test Content N</div></li>
<li><div>Test Content O</div></li>
<li><div>Test Content P</div></li>
<li><div>Test Content Q</div></li>
<li><div>Test Content R</div></li>
<li><div>Test Content S</div></li>
<li><div>Test Content T</div></li>
<li><div>Test Content U</div></li>
<li><div>Test Content V</div></li>
<li><div>Test Content W</div></li>
<li><div>Test Content X</div></li>
<li><div>Test Content Y</div></li>
<li><div>Test Content Z</div></li>
</ol>
<script>
$(function(){
$('ol').sortable({
helper: function(evt, el){
return el.clone().css('color', '#F8F8F8');
},
placeholder: 'placeholder'
});
});
</script>
</body>
</html>
다른 팁
나는 HTML과 CSS를 바꿔야했지만 이것이 당신이 후에 미치는 영향을 달성한다고 생각합니다.
호스팅 된 데모는 다음과 같습니다. http://jsbin.com/erigu (편집 가능한 http://jsbin.com/erigu/edit)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
#numbers>div, #sortables>div {
width: 110px;
height: 100px;
float: left;
border: 1px solid #C0C0C0;
}
#numbers>div {
padding-bottom: 20px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #808080;
background-color: #F8F8F8;
}
#sortables>div {
padding-top: 20px;
text-align: center;
color: black;
}
#sortables {
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div id="numbers">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="sortables">
<div>Test A</div>
<div>Test B</div>
<div>Test C</div>
<div>Test D</div>
</div>
<script>
$(function(){
$('#sortables').sortable({
/*
The helper option allows you to customize the dragged element.
in this case we are adding a background.
*/
helper: function(evt, el){
return el.clone().css({background:'#F8F8F8'});
}
});
});
</script>
</body>
</html>
가장 간단한 것은 li
/ div
다른 요소의 내부에 쌍을 이루고 그에 따라 정렬합니다.
이와 같은 것이 효과가 있어야하지만 원하는 방법에 대한 많은 옵션이 있습니다. 정렬 가능한 기능은 사용할 필요가 없습니다 li
집단.
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">
<span>test A</span>
<div class="DisplayOrder">1</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test B</span>
<div class="DisplayOrder">2</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test C</span>
<div class="DisplayOrder">3</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test D</span>
<div class="DisplayOrder">4</div>
</li>
</ul>