Question

我有一个网格（表格），每个td都是droppable。还有一个可拖动的div。当我拖动div时，所选的droppable始终是中间的td。但是我想要td到div开头的那个。怎么弄这个？

HTML

<div class="parent">
 <table border="1"></table>
 <div class="floater"></div>
</div>

JS

  var size = [10, 10]
  for(var i = 0; i< size[0]; i++) {
    var tr = $('<tr></tr>')
    for(var j = 0; j < size[1]; j++) {
      var td = $('<td></td>')
      tr.append(td)
    }
    $('.parent table').append(tr)
  }

  var dropFunc = function(event, ui) {
        $(event.target).addClass('dropped')
  }

  var overFunc = function(event, ui) {
    $(event.target).addClass('over')
  }

  var outFunc = function(event, ui) {
    $(event.target).removeClass('over')
  }
  $('td').droppable({over : overFunc, out : outFunc, drop : dropFunc})

  $('.floater').draggable()

Answer 1

实现此目的的最简单方法是将droppable tolerance property更改为'pointer'，以便仅在光标指针与可放置元素重叠时触发over事件。

然后，您可以通过更改cursorAt property自动将光标在可拖动元素上的位置设置为左上角。

Updated Example

$('td').droppable({
  over: overFunc,
  out: outFunc,
  drop: dropFunc,
  tolerance: 'pointer'
});

$('.floater').draggable({
  cursorAt: {
    top: 5,
    left: 5
  }
});

如何在Jquery UI中更改drop事件目标Drag＆amp;下降

1 个答案: