通过 jquery 移动文本 div答案

【问题标题】：Move a text div by jquery通过 jquery 移动文本 div
【发布时间】：2022-01-13 20:28:49
【问题描述】：

我有一个包含一些文本的 div，我希望能够在单击并按住鼠标左键时移动该 div，并且当我的指针光标位置发生变化时，div 位置也会发生变化。我的js代码：

$(() => {
    $(document).on("mousemove", "#div", (e) => {
        const x = e.pageX
        const y = e.pageY
            $("#div").css("top", y - 50)
            $("#div").css("left", x - 100)
            console.log(e.pageY)
            console.log(e.pageX)
    })
})

我的html代码：

<div id="div">
        <span>Hello World!</span>
        <span>Look at Me!</span>
        <span>I'm Moving!</span>
    </div>

我的问题是我不知道使用哪个事件。我想一起单击和 mousemove 事件。我现在该怎么办？

【问题讨论】：

你考虑过使用 jQuery-UI Draggable 吗？
欢迎来到 Stack Overflow。有许多方法可以在脚本中启用拖放。例如，请参阅：developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API 您可能希望使用像 jQuery UI 这样的框架，因为它可以使拖放设置变得更加容易。
@Barmar 是的，我使用可拖动但它不起作用。我不知道为什么
发布您的使用尝试可能会更有帮助，然后我们可以告诉您您做错了什么。

标签： javascript html jquery css

【解决方案1】：

考虑以下示例，基于以下Demo。

$(function() {
  $("#draggable").draggable({
    drag: function(event, ui) {
      console.log(event.pageX, event.pageY);
    }
  });
});

#draggable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
  <span>Hello World!</span>
  <span>Look at Me!</span>
  <span>I'm Moving!</span>
</div>

【讨论】：