jquery如何实现div可以随意移动

本文介绍如何利用jQuery UI库使网页中的Div元素变得可拖动。通过简单的代码示例,展示了如何设置及启用拖动功能,并调整鼠标样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

看:http://jqueryui.com/draggable/


下面我做了一个Demo.


注意js放的位置,要放的靠近,若被其他覆盖,则无法移动。


比如:

<div id="move">可移动的DIV</div>


引入jquery.js, jquery-ui.js,


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

<script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


一句:


$("#move").draggable();


如希望,点住时鼠标变手形:


$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");

});


Demo下载:http://pan.baidu.com/s/1nulDck5




  本文转自phpervip 51CTO博客,原文链接:http://blog.51cto.com/phpervip/1738007,如需转载请自行联系原作者



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值