我知道这看起来很奇怪,因为已经有一个更新事件了。但是我正在使用touch-punch库来使jQuery UI函数在触摸设备上工作。但是,例如,在Nexus 7的Chrome浏览器上,更新事件不会触发。这就是为什么我试图通过从sortupdate事件触发sortover事件来修复它。
问题是,我不知道如何在拖放元素下面获取元素的索引。ui.item只返回拖动元素的索引。有任何jQuery UI内建的功能吗?通过鼠标切换/悬停检查获取索引将无法工作,因为拖动的元素比mousecursor大。按光标位置获取元素索引似乎也很棘手.
这里有一个小提琴:https://jsfiddle.net/8sjLw6kL/2/
代码:
<div id="sortable">
<div class="sortable"> bla </div>
<div class="sortable"> ble </div>
<div class="sortable"> blu </div>
</div> JS:
var start_sort_index,
over_sort_index,
update_sort_index;
$('#sortable').sortable({
helper: 'clone',
containment: 'parent',
cursor: 'move'
});
$('#sortable').on('sortstart', function(event, ui){
start_sort_index = ui.item.index();
console.log('start: '+start_sort_index);
});
$('#sortable').on('sortover', function(event, ui){
over_sort_index = ui.item.index();
console.log('over: '+over_sort_index);
$('#sortable').trigger('sortupdate');
});
$('#sortable').on('sortover', function(event, ui){
update_sort_index = (typeof ui !== 'undefined')?ui.item.index():over_sort_index;
over_sort_index = undefined;
//my other code here
});CSS:
#sortable{
width: 100%;
background-color: #ebebeb;
position: relative;
margin-top: 10px;
height: 60px;
}
.sortable{
padding: 5px 10px;
background-color: red;
margin: 5px;
float: left;
} 发布于 2016-04-01 15:39:36
我不太确定这是不是你想要的。但是,至少代码能够确定您正在悬停的元素。我还在我的三星S6上用触击器测试了它,它可以检测到哪个元素是悬停的。
我在堆栈溢出的另一篇文章中添加了一些代码,以检测哪些元素正在悬停。然后我从这个元素中提取html。
我不确定您所引用的是哪个索引,但至少这会给您提供元素。
JSFiddle:JSFiddle
var start_sort_index,
over_sort_index,
update_sort_index;
$('#sortable').sortable({
containment: 'parent',
cursor: 'move',
start: function(event, ui) {
var draggedItem = ui.item;
$(window).mousemove(function(e){
moved(e, draggedItem);
});
},
stop: function(event, ui) {
$(window).unbind("mousemove");
},
});
//Code from http://stackoverflow.com/questions/3298712/jquery-ui-sortable-determine-which-element-is-beneath-the-element-being-dragge
function moved(e, draggedItem) {
//Dragged item's position++
var dpos = draggedItem.position();
var d = {
top: dpos.top,
bottom: dpos.top + draggedItem.height(),
left: dpos.left,
right: dpos.left + draggedItem.width()
};
//Find sortable elements (li's) covered by draggedItem
var hoveredOver = $('.sortable').not(draggedItem).not($( ".ui-sortable-placeholder" )).filter(function() {
var t = $(this);
var pos = t.position();
//This li's position++
var p = {
top: pos.top,
bottom: pos.top + t.height(),
left: pos.left,
right: pos.left + t.width()
};
//itc = intersect
var itcTop = p.top <= d.bottom;
var itcBtm = d.top <= p.bottom;
var itcLeft = p.left <= d.right;
var itcRight = d.left <= p.right;
return itcTop && itcBtm && itcLeft && itcRight;
});
if(hoveredOver.length){
$('.hovering-output').html(hoveredOver.html() + " is being hovered");
console.log(hoveredOver);
} else{
$('.hovering-output').html("");
}
};https://stackoverflow.com/questions/36354442
复制相似问题