点击灰色头部li弹出多模态框仅能拖动最后一个，如何实现任意拖动？

嗨，我来帮你搞定这个问题～你现在遇到的情况，核心是两个原因导致的：全局变量覆盖和动态元素未绑定拖动事件。

为啥只有最后一个能拖动？ #

1. 变量变成全局的了：你代码里的id、imgsrc、modaldiv都没加var/let声明，会自动变成全局变量。每次点新的li，这些变量都会被新值覆盖，最后拖动逻辑只会跟最后一次生成的模态框绑定。
2. 拖动事件没绑定到新模态框：如果你的拖动逻辑是页面加载时就绑定好的，那后来动态生成的模态框根本没被加上拖动事件，自然拖不动。

修正后的完整代码 #

$(document).ready(function(){
  // 先把拖动逻辑封装成复用的函数，方便每次生成新模态框时调用
  function makeModalDraggable(modalElement) {
    $(modalElement).draggable({
      handle: ".modal-header", // 指定只有点击头部才能拖动
      containment: "body" // 限制模态框不能拖出页面范围
    });
  }

  $('li').click(function() {
    // 用let声明变量，把作用域限制在当前点击的回调里，避免被覆盖
    let currentId = $(this).attr('id');
    let currentImgSrc = $(this).find('img').attr('src');
    let modalTemplate = $('.modalExample').html();
    
    // 替换模板里的占位符，生成独一无二的模态框ID和图片地址
    modalTemplate = modalTemplate.replace("myModal", `myModal_${currentId}`);
    modalTemplate = modalTemplate.replace("fakimg", currentImgSrc);
    
    // 把新模态框添加到页面，同时拿到这个新元素的jQuery对象
    const $newModal = $(modalTemplate).appendTo('.area');
    
    // 立刻给这个新模态框绑定拖动功能
    makeModalDraggable($newModal);
    
    // 如果需要自动打开模态框，可以加这行
    // $newModal.modal('show');
  });
});

关键改动点说明 #

• 限制变量作用域：用let声明变量，确保每次点击li时，变量都是当前点击对应的独有的值，不会被后续点击覆盖。
• 封装拖动逻辑：把拖动的代码做成函数，每次生成新模态框后直接调用，给新元素绑定拖动事件。
• 精准绑定新元素：通过$(modalTemplate).appendTo('.area')直接拿到新生成的模态框对象，避免用全局选择器找元素出错。

另外要注意：确保你的页面已经引入了jQuery UI的draggable组件哦，原生jQuery本身没有拖动功能，得靠jQuery UI来实现～

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