Question

我有一个表格（10x10），并在其中一些单元格中有图像。我希望图像在网格单元格之间可以拖动（如果我能轻松获得图像的新位置（x，y），那就太棒了）。我正在使用最新的JQuery。

Answer 1

jQuery UI .draggable()和.droppable()将很好地处理这个问题。

这是一个working fiddle，它说明了一种在表格单元格中拖动图像的方法，并在表格中获得结果单元格坐标。

一般的想法是指定你的可拖动（图像，也许）：

$('#yourimage').draggable();

然后将表格单元格设置为droppables：

$('#tbl td').droppable({
  hoverClass: 'over', // highlight cells as you drag over them
  drop: function( e, ui ){
    /* get drop cell coordinates (1-indexed) */
    var row = cell.closest('tr').prevAll().length + 1;
    var col = cell.closest('td').prevAll().length + 1;        
    otherStuff();
  }
});

Answer 2

你需要在这里使用某种拖放方式。如果您不想自己滚动，请使用jQuery UI扩展进行拖放。请在此处查看：http://jqueryui.com/demos/draggable/

使用JQuery在元素之间拖动div

2 个答案: