jquery 可拖拽的窗体控件实现代码


所以要引入JQUERY框架。
把我的这个控件代码放到一个js文件里面直接引入就可以了
控件代码

复制代码 代码如下:

$.fn.myDrag = function() {
var self = $(this);
self.css("position", "absolute");
var p = self.position();
self.css({ left: p.left, top: p.top });
self.mousedown(
function(event) {
// debugger;
self.data("ifDary", "true"); //保存状态,表示是否可以拖拽
// debugger;
var selfLeft = event.pageX - parseInt(self.css("left")); //计算出鼠标到这个元素的left
var selfTop = event.pageY - parseInt(self.css("top")); //计算出鼠标到这个元素的top
self.data("selfLeft", selfLeft); //保存坐标信息
self.data("selfTop", selfTop);
}
);
$(document).mouseup(
function() {
self.data("ifDary", "false");
//防止窗体飞到外面去
var bWidth = $(window).width();
var bHeight = $(window).height();
var currentleft = parseInt(self.css("left"));
var currenttop = parseInt(self.css("top"));
if (currentleft <= 0)
currentleft = 0;
if (currentleft >= bWidth)
currentleft = bWidth - self.width();
if (currenttop <= 0)
currenttop = 0;
if (currenttop >= bHeight)
currenttop = bHeight - self.height();
self.css({ left: currentleft, top: currenttop });
}
);
$(document).mousemove(function(event) {
var state = self.data("ifDary");
if (state && state == "true") {
var selfLeft = event.pageX - parseInt(self.data("selfLeft")); //计算这个元素的left位置
var selfTop = event.pageY - parseInt(self.data("selfTop"));
self.css({ left: selfLeft, top: selfTop }); //设置这个元素的位置
}
});
return self;
}

javascript代码
复制代码 代码如下:

<script src="../script/jquery-1.3.2.js" type="text/javascript"></script> //这个是JQUERY框架,没有的自己搜索去到处都是,一脚踩一堆
<script src="myDrag.js" type="text/javascript"></script> //这个是我的那个控件代码
<script type="text/javascript">
$(function() {
$("#div1").myDrag();
});
</script>

HTML代码
复制代码 代码如下:

<div id="div1" style="background-color: Red; height: 100px; width: 100px;">
点击拖我吧
</div>



相关阅读:
php 保留小数点
Linux下Mercurial (hg)配置说明
PHP高级技巧全放送(二)
高性能web开发 如何加载JS,JS应该放在什么位置?
用php实现soap通讯
关于打印页面的一些经验
Windows Server 2008 R2终端服务
VB.Net处理MySQL中二进制问题
js或css实现滚动广告的几种方案
Oracle11g数据库怎样实现自我调整功能
JS正则表达式提取字符串中所有汉字的脚本
Oracle聚集函数排序
新手学堂:进入Linux系统的单机模式
Windows7和WinXP共享打印机和FTP设置d的方法是什么
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 春节活动总结 2016大学生入党申请书多少字 《羊皮卷》读后感 路过的人就是错过的风景 平凡也是一种美丽 在记忆的边缘 洋子的语录对话 他们的自白 有意义的雏鹰假日活动作文600字 听听那雨声——与自然同乐 2015福建厦门高考满分作文 学会感恩作文150字 善待错误 办理三同时手续 新生入学自我介绍范本合集 小学四年级作文700字:当班干部真难 文明礼仪从细节做起作文1200字 我见到了螃蟹 中外的交往与冲突 公司员工转正申请-范文 岑参《春梦》诗歌鉴赏 2016韩寒爱情经典语录 三月,梦里千百回 2016—2017学年度八年级上学期语文教学工作总结 小学一年级作文400字:有趣的家长会 身残志坚创业:从算命先生到百万身家的致富能人 【精品】保健品市场调查报告 万能自我介绍范文 我的Q宠“快乐宝贝” 曾经的 议论文作文1100字:小议周礼——读《论语》有感 非礼勿听,勿视,勿言 销售励志故事及感悟 《平面直角坐标系知识点》期末总复习资料 小学五年级作文500字:筷子的神力 黑白时光 个人简历填写 远离职场“冷宫”请学会变通 穆里尼奥经典语录英文 读《做卓越的老师》心得体会 幼儿园教师实践科学发展观体会 不要怕作文600字 我希望能当班长 动物园游记作文200 小学三年级作文350字:新建动物游乐园 2015企业员工入党申请书 你的秀发 送给好友妈妈的母亲节祝福短信 村两委党风廉政建设工作情况汇报 【原创诗歌】迷茫秋语 牵牛花的来历350字

Copyright © 2016 phpStudy |