如何使用jQuery UI Sortable獲取“sortover”事件上拖動元素下方的元素索引？

Question

我知道這看起來很奇怪，因為已經有一個更新事件。 但我使用touch-punch庫讓 jQuery UI 函數在觸摸設備上工作。 但例如在 Nexus 7 的 Chrome 瀏覽器上，更新事件不會觸發。 這就是為什么我嘗試通過從sortover事件觸發sortupdate事件來修復它。

問題是，我不知道如何獲取拖動元素下方元素的索引。 ui.item只返回被拖動元素的索引。 是否有任何 jQuery UI 內置功能？ 通過鼠標懸停/懸停檢查獲取索引不起作用，因為拖動的元素大於mousecursor 。 通過光標位置獲取元素索引似乎也很棘手......

這是一個小提琴： https : //jsfiddle.net/8sjLw6kL/2/

代碼： HTML：

<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;
} 

Answer 1

我不太確定這是你想要的。 但至少代碼能夠確定您正在懸停哪個元素。 我還在我的三星 S6 上使用觸摸打孔器對其進行了測試，它會檢測懸停在哪個元素上。

我在 stackoverflow 上的另一篇文章中添加了一些代碼來檢測正在懸停的元素。 然后我從那個元素中取出 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("");
  }
};