首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在带有jQuery UI可排序的"sortover“事件中,在拖放元素下面获取元素的索引?

如何在带有jQuery UI可排序的"sortover“事件中,在拖放元素下面获取元素的索引?
EN

Stack Overflow用户
提问于 2016-04-01 10:51:48
回答 1查看 495关注 0票数 1

我知道这看起来很奇怪,因为已经有一个更新事件了。但是我正在使用touch-punch库来使jQuery UI函数在触摸设备上工作。但是,例如,在Nexus 7的Chrome浏览器上,更新事件不会触发。这就是为什么我试图通过从sortupdate事件触发sortover事件来修复它。

问题是,我不知道如何在拖放元素下面获取元素的索引。ui.item只返回拖动元素的索引。有任何jQuery UI内建的功能吗?通过鼠标切换/悬停检查获取索引将无法工作,因为拖动的元素比mousecursor大。按光标位置获取元素索引似乎也很棘手.

这里有一个小提琴:https://jsfiddle.net/8sjLw6kL/2/

代码:

代码语言:javascript
复制
<div id="sortable">
  <div class="sortable"> bla </div>
  <div class="sortable"> ble </div>
  <div class="sortable"> blu </div>
</div> 

JS:

代码语言:javascript
复制
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:

代码语言:javascript
复制
#sortable{
  width: 100%;  
    background-color: #ebebeb;  
    position: relative;
    margin-top: 10px;
  height: 60px;
 }  

.sortable{
  padding: 5px 10px;
  background-color: red;
  margin: 5px;
  float: left;
} 
EN

回答 1

Stack Overflow用户

发布于 2016-04-01 15:39:36

我不太确定这是不是你想要的。但是,至少代码能够确定您正在悬停的元素。我还在我的三星S6上用触击器测试了它,它可以检测到哪个元素是悬停的。

我在堆栈溢出的另一篇文章中添加了一些代码,以检测哪些元素正在悬停。然后我从这个元素中提取html。

我不确定您所引用的是哪个索引,但至少这会给您提供元素。

JSFiddle:JSFiddle

代码语言:javascript
复制
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("");
  }
};
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36354442

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档