利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

实现弹出可拖动的Div的方法有很多种，其中使用JQuery+EasyDrag是比较简单实用的一种。下面给出具体的实现方法。

1. 引入相关资源

在HTML文件中引入JQuery和EasyDrag库。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/jquery.easyui.min.js"></script>

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/default/easyui.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/icon.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/color.css" />

2. 创建弹出窗口

在HTML文件中创建弹出窗口的div，设置其样式及内容。

<div id="dialog" style="display:none;width:400px;">
  <form>
    <input type="text" id="inputText" name="inputText"/><br/><br/>
    <input type="button" id="okButton" value="OK"/>
  </form>
</div>

3. 调用EasyDrag

在JavaScript文件中，使用$.fn.easydrag函数来设置弹出窗口可以拖动。

$("#dialog").easydrag();

$.fn.easydrag = function() {
  var drag = {};
  var drop = {};
  var target = this;
  var dragging = false;

  this.mousedown(function(e) {
    drag.x = e.pageX;
    drag.y = e.pageY;
    drag.target = target;
    dragging = true;
  });

  $(document).mousemove(function(e) {
    if (dragging) {
      var x = parseInt(drag.target.css('left'));
      var y = parseInt(drag.target.css('top'));

      drag.target.css({
        left: x + e.pageX - drag.x,
        top: y + e.pageY - drag.y
      });

      drag.x = e.pageX;
      drag.y = e.pageY;
    }
  });

  $(document).mouseup(function(e) {
    dragging = false;
  });
};

4. 显示弹出窗口

在JavaScript文件中，定义函数用于显示弹出窗口。

function showDialog() {
  $('#dialog').dialog({
    title: 'Dialog Title',
    closed: false,
    modal: true,
    buttons: [{
      text: 'OK',
      handler: function () {
        var inputText = $('#inputText').val();
        $('#dialog').dialog('close');
        // do something with inputText
      }
    }]
  });
}

5. 示例1

创建一个按钮，点击后弹出窗口，并将所选的值返回到页面上。

<input type="button" value="Open Dialog" onclick="showDialog()" />

<div id="result"></div>

<script>
  function showDialog() {
    $('#dialog').dialog({
      title: 'Dialog Title',
      closed: false,
      modal: true,
      buttons: [{
        text: 'OK',
        handler: function () {
          var inputText = $('#inputText').val();
          $('#dialog').dialog('close');
          $('#result').html('Selected value: ' + inputText);
        }
      }]
    });
  }
</script>

6. 示例2

创建一个列表，在列表中选择一个元素后，弹出窗口并将所选的值返回到页面上。

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<div id="result"></div>

<script>
  $('#list').on('click', 'li', function() {
    var selectedValue = $(this).html();
    $('#inputText').val(selectedValue);
    showDialog();
  });

  function showDialog() {
    $('#dialog').dialog({
      title: 'Dialog Title',
      closed: false,
      modal: true,
      buttons: [{
        text: 'OK',
        handler: function () {
          var inputText = $('#inputText').val();
          $('#dialog').dialog('close');
          $('#result').html('Selected value: ' + inputText);
        }
      }]
    });
  }
</script>

以上就是利用JQuery+EasyDrag实现弹出可拖动的Div，并向Div传值，然后返回Div选中的值的完整攻略。