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

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

所有的<p>标签都固定在他们的位置上。我想让所有的<p>都是可移动的这样我就可以把它拖到页面上的任何地方。它类似于某种图片库。

是可能的纯JavaScript?或者使用jQuery?

请注意，我已经有了像transform:rotate(30deg)这样的东西，使段落在其轴上倾斜

看一下jQuery UI Draggable:

http://jqueryui.com/draggable/

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

$(elements).draggable();

可以使用jQuery UI调用单个方法。

jQuery UI可拖动

可拖动的小提琴

$("p").draggable();

使用jQuery .draggable()。看到文档。

http://jqueryui.com/draggable/

Add -

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

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

供参考-尝试使用调试器(firebug或chrome开发工具)阅读jQuery错误，检查源代码…它是这样的-

    <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>

相关内容

最新更新

热门标签：