js拖动和改变div宽高度插件
首页 /  web前端 /  JavaScript /  jQuery特效 / jQuery拖动div、移动div、jQuery实现鼠标拖动改变div宽度和高度

1 1 838

jQuery拖动div、移动div、jQuery实现鼠标拖动改变div宽度和高度

js拖动和改变div宽高度插件

jQuery拖动div、移动div、jQuery实现鼠标拖动改变div宽度和高度_图一

定义一个要移动的div

<div id="app_2" class="showapp_content_main" isdrag="1" drag="0" currentdisy="0" mode="me" style="">
   <div class="showapp_content_main_position">
	   <div class="main_title">  这里可以移动</div>
	   <div class="main_content">
	       <div class="main_content_text"></div>
	   </div>
   </div>
</div>

调用js插件库

jQuery(function(){
	window_app_move('app_2');
});
/**
 * 应用移动
 */
function window_app_move(appid){
	id = appid;
	var data1 = {'fun_back':'app_drag_back','TanceHeight':30};
	jQuery("#"+appid).Drag(data1);
	var data2 = {'fun_back':'app_drag_back'};
	jQuery("#"+appid).Resize(data2);
}
//移动app之后调用/app改变大小之后
function app_drag_back(){
	var appid = id;
	var topf = jQuery("#"+appid).offset().top/jQuery(window).height();
	var topp = topf.toFixed(4);
	apptop = topp * 100;//上
	var leftf = jQuery("#"+appid).offset().left/jQuery(window).width();
	var leftp = leftf.toFixed(4);
	appleft = leftp * 100;//左
	appwidth = jQuery("#"+appid).width();//宽
	appheight = jQuery("#"+appid).height();//高
	var str = 'top:'+apptop+'px;<br/>left:'+appleft+'px;<br/>width:'+appwidth+'px;<br/>height:'+appheight+'px';
	jQuery(".main_content_text").html(str);
}
下载所需:0 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=11

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2017-08-10 18:05
10
送花
20积分一朵