如何在按钮点击时获取被拖拽元素的innerHTML？

核心思路 #

不用手动修改按钮的onclick属性，而是通过JavaScript监听按钮点击事件，在点击时动态收集所有已拖拽到目标区域的元素名称，再调用目标函数并传入这些名称。这种方式比维护onclick字符串更灵活，还能避免字符转义的问题。

具体实现 #

方案一：点击按钮时动态收集元素名称（推荐） #

在现有JavaScript代码末尾添加以下逻辑：

// 绑定SHOW按钮的点击事件
$('#show_graph').click(function() {
  // 收集所有已拖拽元素的名称
  const draggedItems = [];
  $('#dropzone .drop-item summary').each(function() {
    draggedItems.push($(this).text().trim());
  });
  
  // 调用目标函数，传入收集到的元素名称数组
  if (draggedItems.length > 0) {
    callYourFunction(draggedItems);
    // 如果只需要最后一个拖拽的元素，改用 draggedItems[draggedItems.length - 1]
  }
});

// 替换为你实际需要调用的业务函数
function callYourFunction(itemNames) {
  console.log('已拖拽的元素名称:', itemNames);
  // 这里编写你的业务逻辑，比如生成图表、提交数据等
}

方案二：更新按钮的onclick属性（按需选择） #

如果必须要把元素名称直接写入按钮的onclick字符串，可以修改拖拽和删除逻辑，同步更新onclick：

1. 修改drop事件逻辑

$('#dropzone').droppable({
  // 保留原有属性...
  drop: function (e, ui) {
    var $el = $('<div class="drop-item"><details><summary>' + ui.draggable.text() + '</summary><div><label>More Data</label><input type="text" /></div></details></div>');
    $el.append($('<button type="button" class="btn btn-default btn-xs remove"><span class="fa-solid fa-trash text-white "></span></button>').click(function () { 
      $(this).parent().detach();
      // 删除元素后更新按钮onclick
      updateShowButtonOnclick();
    }));
    $(this).append($el);
    // 拖拽完成后更新按钮onclick
    updateShowButtonOnclick();
  }
  // 保留原有sortable逻辑...
});

2. 添加更新onclick的工具函数

function updateShowButtonOnclick() {
  const draggedItems = [];
  $('#dropzone .drop-item summary').each(function() {
    // 转义单引号，避免JS语法错误
    const itemName = $(this).text().trim().replace(/'/g, "\\'");
    draggedItems.push(`'${itemName}'`);
  });
  
  // 拼接onclick调用字符串
  const onclickStr = draggedItems.length > 0 
    ? `callYourFunction([${draggedItems.join(',')}])` 
    : '';
  
  $('#show_graph').attr('onclick', onclickStr);
}

// 替换为你实际的业务函数
function callYourFunction(itemNames) {
  console.log('已拖拽的元素名称:', itemNames);
}

注意事项 #

• 方案一无需处理字符转义，逻辑更简洁，推荐优先使用。
• 方案二需要注意对元素名称中的特殊字符（如单引号）进行转义，否则会导致onclick语法错误。

内容的提问来源于stack exchange，提问作者LEGENDRYzZzZ