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="http://www.jbxue.com /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>
jquery 可拖拽的窗体控件实现代码的更多相关文章
- 简易的DragDropCarousel 拖拽轮播控件
上一篇文章有写到 自动轮播的控件 简易的AutoPlayCarousel 轮播控件 - 黄高林 - 博客园 (cnblogs.com) 本章是基于自动轮播的一种衍生,通过拖拽鼠标进切换 直接上代码 ...
- _ZNote_编程语言_Qt_信号槽实现_拖拽方式使用控件
所谓的信号槽,实际上就是观察者模式. 当某个事件发生后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal). 这种发出信号是没有目的的,类似于广播.如果对象对这个信号感兴趣,它就会使 ...
- 【C#/WPF】用Thumb做可拖拽的UI控件
需求:简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台: <Canvas x:Name="g"> < ...
- 【WPF/C#】拖拽Image图片控件
需求:使得Image图片控件能够被拖动. 思路:关键是重写Image控件的几个鼠标事件,实现控制. 前台: <Image Source="C:\Users\Administrator\ ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- Winform窗体控件自适应大小
自己写的winform窗体自适应大小代码,代码比较独立,很适合贴来贴去不会对原有程序造成影响,可以直接继承此类或者把代码复制到自己的代码里面直接使用 借鉴了网上的一些资料,最后采用重写WndProc方 ...
- C#窗体控件拖动
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- (转)sl简单自定义win窗体控件
sl简单自定义win窗体控件 相信大家接触过不少win窗体控件ChildWin子窗口就的sl自带的一个 而且网上也有很多类似的控件,而今天我和大家分享下自己制作个win窗体控件,希望对初学 ...
随机推荐
- 把thinkphp项目拷贝到其他电脑上报错
提示 include(***\ThinkPHP\Library/Think/Log.class.php): failed to open stream 把Application\Runtime文件夹里 ...
- STL - 容器 - 运行期指定排序准则
RuntimeCmp.hpp #include <set> using namespace std; // type for runtime sorting criterion class ...
- es6-块级作用域let 和 var的区别
块级绑定 js的处理机制和我们大家想象的完全不同,并不完全是所谓函数调用以及上下执行那样简单,它是存有”域”的本质区别的. var具有全局污染特性,所以es6才会出现let .const. 下面通过一 ...
- PHP高级教程-高级过滤器
PHP 高级过滤器 检测一个数字是否在一个范围内 以下实例使用了 filter_var() 函数来检测一个 INT 型的变量是否在 1 到 200 内: 实例 <?php $int = 122; ...
- JDBC二查询(web基础学习笔记八)
一.建立数据库 --创建news表空间 CREATE TABLESPACE tbs_news DATAFILE 'F:\ORACLE\news.dbf' SIZE 10M AUTOEXTEND ON; ...
- An application icon
The application icon is a small image which is usually displayed in the top left corner of the title ...
- VB中将INT型转换成STRING和从STRING转换成INT型的函数
CStr 函数示例本示例使用 CStr 函数将一数值转换为 String. Dim MyDouble, MyStringMyDouble = 437.324 ' MyDouble 为 Double ...
- spring的applicationContext.xml中的DBCP配置如下:
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy ...
- BZOJ 1040 ZJOI 2008 骑士 基环树林+树形DP
题目大意:有一些骑士.他们每个人都有一个权值.可是因为一些问题,每个骑士都特别讨厌还有一个骑士.所以不能把他们安排在一起.求这些骑士所组成的编队的最大权值和是多少. 思路:首先貌似是有向图的样子,可是 ...
- linux 和windows系统下同时可用的UML建模工具(umbrello),超强
原文地址:linux 和windows系统下同时可用的UML建模工具(umbrello),超强 作者:zhangjiakouzf OPEN SOURCE 的 UML建模工具 -- umbrello ...