Question

在此文件中：http://jsfiddle.net/sntshkmr60/4KsHg/

所有<p>代码都固定在他们的位置。我想让所有<p>都可移动，这样我就可以将它拖到页面上的任何其他位置。它类似于某种照片库。

纯JavaScript可以吗？或者jQuery？

请注意，我已经有类似transform:rotate(30deg)的内容，使得段落在其轴上倾斜。

Answer 1

看一下jQuery UI Draggable：

http://jqueryui.com/draggable/

Answer 2

可以使用 jQuery UI （http://jqueryui.com/）完成。将脚本包含到文档中后，您现在可以调用：

$(elements).draggable();

Answer 3

使用jQuery UI进行单个方法调用是可能的。

jQuery UI Draggable

Draggable Fiddle

$("p").draggable();

Answer 4

使用jQuery .draggable（）。见文档。

http://jqueryui.com/draggable/

Answer 5

添加 -

    <script type="text/javascript">
  $(function() {
    $( "p" ).draggable();
  });
    </script>

在这一行之下 -

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

FYI - 尝试使用调试器（firebug或chrome开发人员工具）读取jQuery错误，检查SOURCE代码..就像这样 -

    <script type="text/javascript">
  $(function() {
    $( "p" ).draggable();
  });
    </script>
  </head>
  <body>
    <p class="rand"> This is the first paragraph  </p>
    <p class="rand"> This is the second one  </p>
    <p class="rand"> Here comes the third one  </p>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  </body>
</html>

如何使元素可拖动/移动？

5 个答案: