如何在jQuery UI Draggable停止时获取目标/类名并拖拽菜单至收藏容器

嘿，我来帮你搞定这个拖拽添加收藏的问题！其实你只需要结合jQuery UI的Draggable和Droppable两个插件就能完美实现——Draggable负责让菜单可拖拽，Droppable负责监听收藏容器的放置动作，这样就能精准完成添加操作，同时轻松拿到目标容器的信息。

核心实现思路 #

单纯用appendTo只能指定拖拽元素的默认父容器，但没法判断用户是不是真的把元素拖到了收藏容器里。给收藏容器加上Droppable的“可放置”属性后，就能在元素被成功放到容器时触发专属回调，这时候再执行添加操作才是最可靠的。

完整代码示例 #

HTML结构 #

先准备好可拖拽的菜单列表和收藏容器：

<!-- 可拖拽的菜单列表 -->
<ul id="menu-list">
  <li class="menu-item">首页</li>
  <li class="menu-item">我的订单</li>
  <li class="menu-item">购物车</li>
  <li class="menu-item">个人中心</li>
</ul>

<!-- 收藏容器 -->
<div id="favorite-container">
  <h3>我的收藏菜单</h3>
  <ul id="favorite-list" class="favorite-box"></ul>
</div>

JavaScript逻辑 #

初始化Draggable和Droppable，处理拖拽和放置动作：

$(function() {
  // 1. 初始化可拖拽菜单元素
  $('.menu-item').draggable({
    helper: 'clone', // 克隆一个元素来拖拽，保留原菜单的条目
    revert: 'invalid', // 如果没拖到指定容器，拖拽元素自动返回原位
    cursor: 'move' // 拖拽时显示移动光标
  });

  // 2. 初始化收藏列表为可放置目标
  $('#favorite-list').droppable({
    accept: '.menu-item', // 只接受类为menu-item的元素，避免其他元素误放
    drop: function(event, ui) {
      // 获取被拖拽的原始菜单元素
      const draggedMenu = ui.draggable;
      
      // 克隆元素并添加到收藏列表（如果要直接移动原元素，去掉clone()即可）
      const favoriteItem = draggedMenu.clone();
      favoriteItem.appendTo(this);

      // 可选：给原菜单标记已收藏状态
      draggedMenu.addClass('already-favorited').css('opacity', '0.6');

      // 3. 获取目标容器的信息（这里就是收藏列表）
      const targetContainer = $(this);
      console.log('目标容器ID:', targetContainer.attr('id'));
      console.log('目标容器类名:', targetContainer.attr('class'));
      console.log('目标容器元素:', targetContainer);
    }
  });
});

怎么在拖拽停止时获取目标元素/类名？ #

上面的代码里，drop事件就是专门处理“元素被放到目标容器”的场景，在这个回调里：

• $(this) 就是当前的目标容器（也就是你拖进去的收藏列表），直接用attr('class')或attr('id')就能拿到类名/ID。
• ui.draggable 是被拖拽的原始菜单元素，你也可以获取它的信息来做后续处理。

如果一定要用Draggable的stop事件（不推荐，因为不管拖到哪都会触发），可以这样判断：

$('.menu-item').draggable({
  appendTo: 'body',
  helper: 'clone',
  stop: function(event, ui) {
    // 获取拖拽结束后，克隆元素的父容器
    const parent = ui.helper.parent();
    // 判断是不是收藏容器
    if (parent.is('#favorite-list')) {
      console.log('目标容器类名:', parent.attr('class'));
      // 这里执行添加操作
      ui.draggable.clone().appendTo(parent);
    }
  }
});

额外提示 #

• 如果不需要保留原菜单条目，把helper: 'clone'去掉，直接用ui.draggable.appendTo(this)就能移动原元素到收藏容器。
• 可以给收藏后的元素加样式，比如添加删除按钮，方便用户取消收藏。

内容的提问来源于stack exchange，提问作者Triwahyu Pamungkas Pribadi