如何使用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("");
  }
};