拖拽排序（dragsort）后mouse up回调失效，如何自动更新输入框值？

我明白你现在遇到的麻烦——拖拽完图片排序后，还得手动点一下图片才能更新$('#pic').val()的值，确实有点繁琐。你试过触发第一个<li>的点击事件但没效果，那咱们换个思路来解决：

方案1：直接在拖拽结束回调里执行更新逻辑（推荐） #

与其绕弯模拟点击事件，不如把更新输入框的代码抽成独立函数，这样不管是点击<li>还是拖拽结束，都能直接调用，既清晰又能避免模拟事件可能带来的上下文问题。

首先定义一个通用的更新函数：

function updatePicInput() {
  // 这里写你原来绑定在<li>点击事件里的更新逻辑，比如：
  const selectedImgSrc = $('.mediaset li.active').find('img').attr('src');
  $('#pic').val(selectedImgSrc);
}

然后调整两处逻辑：

• 原来的<li>点击事件里调用这个函数：

$('.mediaset li').on('click', function() {
  // 先处理选中状态（比如给当前<li>加active类，移除其他<li>的active）
  $(this).addClass('active').siblings().removeClass('active');
  // 调用更新函数
  updatePicInput();
});

• 找到你用的拖拽排序插件的结束回调事件（比如jQuery UI Sortable的stop事件，其他插件可能叫onDragEnd之类的），在回调里执行更新：

$('.mediaset ul').sortable({
  stop: function(event, ui) {
    // 拖拽结束后，先设置选中状态（比如选中第一个<li>，或者保持之前的选中项）
    const targetLi = $(this).find('li').first();
    targetLi.addClass('active').siblings().removeClass('active');
    // 直接调用更新函数
    updatePicInput();
  }
});

方案2：正确触发<li>的点击事件 #

如果你还是想通过模拟点击来实现，可能之前的click()方法没生效是因为DOM重排时机或者事件绑定的问题，可以试试用trigger('click')并加个短暂延迟：

$('.mediaset ul').sortable({
  stop: function() {
    // 给插件一点重排DOM的时间
    setTimeout(() => {
      $('.mediaset li').first().trigger('click');
    }, 100);
  }
});

关键注意点 #

• 要确认你用的拖拽排序插件的具体回调名称，不同插件的拖拽结束回调命名可能不同
• 如果输入框更新逻辑依赖<li>的active类，一定要在更新前先正确设置这个类的状态

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