I have a list that is using jQueryUI sortable. I need to keep track of each new index of the element while dragged, based on the "change" event of the plugin.
But it only works reliably from slow, up to normal drags. At those velocities, there is no error whatsoever. But if the user drags the element too quickly (which will happen), the "change" event loses track of some of the indexes and some information is lost along the way with no error thrown in the browser's console.
The problem:
https://jsfiddle.net/dzhn6s5g/1/
In this jsFiddle, you can drag an element and see its index change. Below the list, while dragging, you will have a console emulation keeping track of the indexes in black.
If dragged quickly, you'll see some of those indexes become red. This is the problem. This means their previous position is overlooked by the sortable script during the change event for a reason I just don't get. The continuity is broken and this continuity is primordial for my needs. The velocity is the only thing that breaks the continuity.
The script:
Half of it is about keeping track of the index (Sortable has a peculiar way of referencing the indexes. So there is a minimal amount of code needed to visually make sense out of them. That way, the element gets a reference index that is intuitively the one you'd expect to see, in an orderly fashion).
The other half is just about emulating a kind of console for debugging purposes.
My guesses:
I might be wrong but I end up thinking it's a tracking issue with the "change" event or that the dragged element doesn't keep up with the mouse cursor (it feels like it is not always under the cursor at high velocities). Unless there is a Sortable option to use that I'm not aware of...
I think it's one of those scenarios because whatever code I try to use inside the "change" event, I always end up having this gap problem.
I tried everything I could think of for days now and I'm stuck. Your help would be appreciated.
HTML:
<html>
<body>
<div class="panel">
<ul class="panel_list">
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="ticked"></li>
<li class="unticked"></li>
<li class="unticked"></li>
<li class="unticked"></li>
</ul>
</div>
<div class='console'></div>
</body>
</html>
CSS:
.console{
width:100%;
}
.panel ul{
list-style-type:none;
background:red;
width:30%;
}
.panel li{
height:29px;
border-bottom:1px solid #454d5a;
text-align: left;
vertical-align: middle;
line-height:29px;
padding-left:8px;
background: #666;
}
.panel_highlight{
height:29px;
background:#1c2128 !important;
}
.unticked{
color:#7c7a7d;
background:#222 !important;
}
jQuery:
var origValue;
var c=0;
var x=0;
var old_info='';
var info;
// LIST RELATED
//With or without this, the problem will occur.
$('li').each(function(){$(this).data('index',c++);$(this).text(c);})
c=0;
$( ".panel_list" ).sortable({
placeholder: 'panel_highlight',
tolerance : 'pointer',
axis : 'y',
opacity : 0.9,
cancel : '.unticked',
start: function(event, ui){
// LIST RELATED
origValue = ui.item.data('index');
$(this).data('idx', ui.item.index());
// CONSOLE RELATED
$('.console').html(''); old_info=''; info='';
},
change: function(event, ui){
// LIST RELATED
var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
var a=ui.placeholder.index();
var b=a+1;
if(idx - $(this).data('idx')==1)
{//downward dragging
if((a<=origValue) || (x==1)){ui.item.text(b);x=0;}
else {ui.item.text(a);};
}
else
{//upward dragging
if(a<=origValue) {ui.item.text(b);x=1;}
else {ui.item.text(a);};
};
$(this).data('idx', idx);
//With or without this, the problem will occur.
$('li').each(function(){if(ui.item.index() !=$(this).index())
$(this).data('index',c++);$(this).text(c);
}})
c=0;
// CONSOLE RELATED
info=$('.console').html();
if(old_info !=''){
var valAbs= Math.abs( parseInt(ui.item.text()) - parseInt(old_info));
if(valAbs==1){info=info+' + '+ui.item.text();}
else{info=info+' + <span style="color:red">'+ui.item.text()+'</span>';};
}
else{info=ui.item.text();};
$('.console').html(info);
old_info = ui.item.text();
}
});
from jQueryUI sortable and drag speed issue
0 komentar:
Posting Komentar