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>

赞 (0)

相关推荐

  • jQuery代码实现图片墙自动+手动淡入淡出切换效果

    jQuery代码实现图片墙自动+手动淡入淡出切换效果

    相关阅读: Jquery代码实现图片轮播效果(一) 在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高.今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧! 先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码. 添加一个div(class=container),设置宽度和高度,这里设置了宽800px,高450px.添加居中的定位.在div里面添加一个ul(class="img")列表用来盛放图片,设置u

  • jQuery表格列宽可拖拽改变且兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • jQuery EasyUI API 中文文档 - Draggable 可拖拽

    用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(

  • jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    本文实例讲述了jQuery实现可拖拽的许愿墙效果.分享给大家供大家参考,具体如下: 运行效果图如下: 这里简单介绍下功能点: ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了,附上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>许愿墙</title> <lin

  • jquery实现可旋转可拖拽的文字效果代码

    jquery实现可旋转可拖拽的文字效果代码

    本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript

  • jquery实现背景墙聚光灯效果示例分享

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title

  • jquery实现可拖拽弹出层特效

    功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><

  • 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

  • C#在Windows窗体控件实现内容拖放(DragDrop)功能

    C#在Windows窗体控件实现内容拖放(DragDrop)功能

    一.将控件内容拖到其他控件 在开发过程中,经常会有这样的要求,拖动一个控件的数据到另外一个控件中.例如将其中一个ListBox中的数据拖到另一个ListBox中.或者将DataGridView中的数据拖动到TreeView的某个节点. 在应用程序中,是通过处理一系列事件,如DragEnter,DragLeave和DragDrop事件来实现在Windows应用程序中的拖放操作的.通过使用这些事件参数中的可用信息,可以轻松实现拖放操作. 拖放操作在代码中是通过三步实现的,首先是启动拖放操作,在需要拖

  • C#实现winform用子窗体刷新父窗体及子窗体改变父窗体控件值的方法

    本文实例讲述了C#实现winform用子窗体刷新父窗体及子窗体改变父窗体控件值的方法.分享给大家供大家参考.具体如下: 第一种方法: 用委托,Form2和Form3是同一组 Form2 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows

  • 如何：对Windows 窗体控件进行线程安全调用

    如何：对Windows 窗体控件进行线程安全调用

    示例 访问 Windows 窗体控件本质上不是线程安全的.如果有两个或多个线程操作某一控件的状态,则可能会迫使该控件进入一种不一致的状态.还可能出现其他与线程相关的 bug,包括争用情况和死锁.确保以线程安全方式访问控件非常重要. .NET Framework 有助于在以非线程安全方式访问控件时检测到这一问题.在调试器中运行应用程序时,如果创建某控件的线程之外的其他线程试图调用该控件,则调试器会引发一个 InvalidOperationException,并提示消息:"从不是创建控件 contr

  • C++获得其他程序窗体控件中信息的方法

    本文实例讲述了C++获得其他程序窗体控件中信息的方法.分享给大家供大家参考.具体分析如下: 这里演示了获得其他程序窗体控件信息的方法, 用FindWindow API找到文本框句柄,用SendMessage(WM_GETTEXT)获得文本 #include <windows.h> BOOL CALLBACK EnumChildProc(HWND hWnd,LPARAM lParam); int WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrev

  • jquery利用拖拽方式在图片上添加热链接

    jquery利用拖拽方式在图片上添加热链接

    本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松

  • jQuery实现拖拽效果插件的方法

    本文实例讲述了jQuery实现拖拽效果插件的方法.分享给大家供大家参考.具体如下: 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/li

  • jQuery div拖拽用法实例

    本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta n

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • 在多线程中调用winform窗体控件的实现方法

    本文实例讲述了在C#中实现多线程中调用winform窗体控件的方法,对于C#程序设计的学习有着很好的借鉴参考价值.具体方法如下: 首先,由于Windows窗体控件本质上不是线程安全的.因此如果有两个或多个线程适度操作某一控件的状态(set value),则可能会迫使该控件进入一种不一致的状态.还可能出现其他与线程相关的 bug,包括争用和死锁的情况.于是在调试器中运行应用程序时,如果创建某控件的线程之外的其他线程试图调用该控件,则调试器会引发一个 InvalidOperationExceptio

随机推荐