<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>jQuery 模块拖动，拖动层效果</title>
<style type="text/css">
#div2
{
position:absolute
width:400px
height:300px
border:1px solid #333333
background-color:#777788
text-align:center
line-height:400%
font-size:13px
left:80px
top:20px
}
</style>
<script type="text/javascript" language="javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var _move=false//移动标记
var _x,_y//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").click(function(){
//alert("click")//点击（松开后触发）
}).mousedown(function(e){
_move=true
_x=e.pageX-parseInt($("#div2").css("left"))
_y=e.pageY-parseInt($("#div2").css("top"))
$("#div2").fadeTo(20, 0.25)//点击后开始拖动并透明显示
})
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y
$("#div2").css({top:y,left:x})//控件新位置
}
}).mouseup(function(){
_move=false
$("#div2").fadeTo("fast", 1)//松开鼠标后停止移动并恢复成不透明
})
})
</script>
</head>
<body>
<div id="div2">支持拖拽</div>
</body>
</html>
(function($){//拖拽插件,参数:id或object
$.Move = function(_this){
if(typeof(_this)=='object'){
_this=_this
}else{
_this=$("#"+_this)
}
if(!_this){return false}
_this.css({'position':'absolute'}).hover(function(){$(this).css("cursor","move")},function(){$(this).css("cursor","default")})
_this.mousedown(function(e){
var offset = $(this).offset()
var x = e.pageX - offset.left
var y = e.pageY - offset.top
_this.css({'opacity':'0.3'})
$(document).bind("mousemove",function(ev){
_this.bind('selectstart',function(){return false})
var _x = ev.pageX - x//获得X轴方向移动的值
var _y = ev.pageY - y//获得Y轴方向移动的值
_this.css({'left':_x+"px",'top':_y+"px"})
})
})
$(document).mouseup(function(){
$(this).unbind("mousemove")
_this.css({'opacity':''})
})
}
})(jQuery)
把这个保存为xxx.js文件，引入到页面，调用：
$(function(){
$.Move('myId')//参数可以是元素id，也可以是jQuery对象
})
HTML元素textarea浏览器中固定大小和禁止拖动textarea标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。
但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：
1：彻底禁用拖动（推荐）；
resize: none
2：只是固定大小，右下角的拖动图标仍在；
width: 260px
height: 120px
max-width: 260px
max-height: 120px
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）