jquery实现仿JqueryUi可拖动的DIV实例

本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下：

这是用Jquery写的代码，仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢，写的一个小东西。参考了下网上的其他人写的类似代码，但是不完全模仿

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#typewords
{
}
#write
{
}
#container
{
 border:2px solid red;
 width:800px;
 height:500px;
}
#draggable
{
 position:absolute;
 z-index:5;
 width:200px;
 height:200px;
 top:20px;
 left:50px;
 border: 3px solid blue;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
//拖动
function Drag()
{
  $("#draggable").mousemove(function(event){
  //得到X坐标和Y坐标
  var x=event.clientX;
  var y=event.clientY;
  //得到可拖动框的高度和宽度
  var widthX=$("#draggable").width();
  var heightY=$("#draggable").height();
  //alert("x:"+ x+"width:"+widthX);
  //确定拖动的时候X,Y的值
  $("#draggable").css("top",y-50+"px");
  $("#draggable").css("left",x-50+"px");
 });
}
function MouseUp()
{
   $("#draggable").mouseup(function(){
   if(window.captureEvents)
   {
    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    var d = document;
    d.onmousemove = null;
    d.onmouseup = null;
   }
   //解除mousemove的绑定
   $("#draggable").unbind("mousemove");
  });
}
//鼠标拖动DIV,鼠标按下去的事件
//alert('1');
$(document).ready(function(e) {
 //鼠标按下去的时候执行下面的代码
 $("#draggable").mousedown(function(){
  Drag();
  //鼠标点击的时候取消事件绑定
  MouseUp();
  });
});
</script>
</head>
<body>
<!--输入文字 -->
<div><input id="typewords" type="text" />  <input type="button" id="write" value="写心情" /></div>
<br />
<hr />
<!-- container,里面包含了心情的内容-->
<div id="container">
 <!--可拖动的DIV -->
 <div id="draggable">
 测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
 </div>
</div>
</body>
</html>

运行效果如下：

希望本文所述对大家的jquery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现Email邮箱地址自动补全功能代码

    jQuery实现Email邮箱地址自动补全功能代码

    本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • jQueryUI写一个调整分类的拖放效果实现代码

    jQueryUI写一个调整分类的拖放效果实现代码

    所以还是自己动手丰衣足食,还是坚持简单就是美的代码风格. 试试在iframe里嵌入一个测试页面,你可以使用鼠标拖动项目,调整分类: 当然,这并不是我要的最终效果,只能说它已经实现了一个我想要的拖放效果.我要求的在这个基础上,还要增加自动排序,位置变更后恢复之前元素bind的jQuery事件等. 代码 代码如下,如要复制,请先查看纯文本版本! 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Drag &

  • jQueryUI的Dialog的简单封装

    写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. DialogHelper的源代码如下: 复制代码 代码如下: //--对话框辅助对象-begin //现在这个对象只是简单的封装(未来可能会复杂些). //其作用就是简化jQuery UI的dialog的的调用方式,不在需要改动

  • 使用jquery实现仿百度自动补全特效

    新建index.html文件,直接复制下面代码到新建的文件index.html里面,用浏览器访问,仅用于参考: <!doctype html> <html> <meta charset="utf-8"> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .auto_hidden { width:204px;b

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

  • jqueryUI里拖拽排序示例分析

    示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 复制代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">

  • jQueryUI如何自定义组件实现代码

    如何开始使用 首先用$.widget()方法开始定义你的组件,它只接收三个参数:第一个是组件名称,第二个是可选的基类组件(默认的基类是$.Widget),第三个是组件的原型. 组件名称必须包含命名空间,要注意的是,官方组件的命名空间是以'ui'开头的,比如:'ui.tabs'.我在下面的用'我'的拼音('wo'). 复制代码 代码如下: $.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototyp

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • jQuery实现文本框邮箱输入自动补全效果

    jQuery实现文本框邮箱输入自动补全效果

    邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下: 完整demo代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • PHP+jQuery实现自动补全功能源码

    前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须

  • jquery 实现输入邮箱时自动补全下拉提示功能

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能. 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "

  • jquery实现邮箱自动补全功能示例分享

    复制代码 代码如下: (function($){    $.fn.autoMail = function(options){         var autoMail = $(this);         var _value   = '';         var _index   = -1;         var _width   = autoMail.outerWidth();         var _height  = autoMail.outerHeight();        

随机推荐