使用jQueryUI Draggable/Droppable clone时获取原元素数据/属性的问题

我太懂你这个困扰了——当设置helper: 'clone'后，拖拽事件里默认操作的是克隆出来的辅助元素，不是你真正想要的原表格行，所以直接去拿data-id肯定会失败。不用额外记录全局变量的话，咱们可以借助拖拽事件的回调来传递原元素的引用，具体方法如下：

步骤1：拖拽开始时把原元素绑定到Helper上 #

初始化draggable的时候，利用start事件把原元素的引用存到克隆出来的helper里：

$(".draggable").draggable({
  helper: 'clone',
  start: function(event, ui) {
    // 把当前原行（this就是原元素）存入helper的data中
    ui.helper.data('originalRow', $(this));
  }
});

步骤2：放置时从Helper取出原元素获取属性 #

在droppable的drop事件里，从helper的data中取出原元素，就能轻松拿到它的data-id或者其他属性了：

$(".droppable").droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    // 取出存储的原行元素
    const originalRow = ui.helper.data('originalRow');
    // 获取原行的data-id属性
    const targetId = originalRow.data('id');
    
    // 这里可以做你需要的逻辑，比如打印或者使用这个ID
    console.log("原表格行的data-id是：", targetId);
    
    // 最后把克隆的行添加到目标表格（如果需要的话）
    ui.helper.appendTo(this);
  }
});

原理说明 #

start事件触发时，回调里的this指向的是被拖拽的原表格行，我们通过ui.helper.data()把这个原元素绑定到克隆出来的helper上。等到drop事件触发时，再从helper的data中取出原元素，就能访问它所有的属性和数据了，完全不需要额外的全局变量来记录状态。

内容的提问来源于stack exchange，提问作者A.O.