combinação tipo de
-
21-08-2019 - |
Pergunta
Eu sou novo em jQuery. Eu quero usar sortableUI ao meu datalist. Cada linha datalist contém texto com número de série. Eu tenho usado ui classificável com sucesso. Mas agora Eu quero mover o texto não o número de série durante a classificação. Aqui está o meu Código Exemplo. O div exibe o número de série no superior esquerda canto de cada li. Agora, se eu tentar Strat arrastando para Instância 2ª Li com 3 li, em seguida, item 3 vai para a segunda posição como governar mas o problema é que ele vai atrás div 2º do item (onde deveria ser antes div como primeira carga). Como resultado, de acordo com DIV estilo .. série no 1 e 2 sobreposição na posição 1 do item.
Existe alguma maneira eu poderia usar para manter o div logo após é li correspondendo ao classificar?
<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>
Imagem Antes de classificação:
Agora, se eu começar a mover um ligeiro, u pode ver o div contendo de série não mostra ainda no lugar certo
Após a triagem segundo item a 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>
Imagem após separação:
não pode ver imagem
O estilo de Li e Div são mostrados aqui Estilo:
.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;
}
Solução
Apenas pensou em uma solução alternativa que é um pouco mais elegante: 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>
Outras dicas
Eu tive que mudar o código HTML e CSS, mas eu acho que isso alcança o efeito que foram depois.
Aqui está uma demonstração hospedado: http://jsbin.com/erigu (editável via 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>
mais simples coisa pode ser colocar os pares li
/ div
dentro de outro elemento, e classificar com base nisso.
Algo como isso deve funcionar, embora haja uma série de opções de como você deseja fazê-lo. O recurso classificáveis ??não requer que você use elementos 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>