<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Qing's Web</title>
    <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <style type="text/css">

        .moveBar {
            position: absolute;
            width: 250px;
            height: 300px;
            background: #666;
            border: solid 1px #000;
            margin: 50px;
            left:200px;
            top:200px;
        }

        #banner {
            background: #52CCCC;
            cursor: move;
        }
    </style>
</head>

<body >

<div class="moveBar">
    <div id="banner">按住此处移动当前div</div>
    <div class="content">这里是其它内容</div>
</div>

<script>
    jQuery(document).ready(
        function() {
            $('#banner').mousedown(
                function(event) {

                    $(".moveBar").css("margin","0px")

                    var isMove = true;
                    var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
                    var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
                    $(document).mousemove(function(event) {
                        if(isMove) {
                            var obj = $('.moveBar');
                            obj.css({
                                'left': event.pageX - abs_x,
                                'top': event.pageY - abs_y
                            });
                        }
                    }).mouseup(
                        function() {
                            var obj = $('.moveBar');
                            //还原样式，并获取
                            obj.css({
                                'left': $('div.moveBar').offset().left-50,
                                'top': $('div.moveBar').offset().top-50
                            });
                            $(".moveBar").css("margin-left","50px")
                            $(".moveBar").css("margin-top","50px")

                            isMove = false;
                        }
                    );
                }
            );
        }
    );
</script>
</body>
</html>

div拖动的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  4. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  5. 实现DIV拖动

    Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需 ...

  6. jQuery实现DIV拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  8. div拖动实现及优化

    工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下.内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小.不完美的地方是有时候会遮挡页面上最右边的按钮,作 ...

  9. 手机版 div拖动

    <!doctype html> <html> <head> <title></title> <script type="te ...

  10. 自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. mycat安装

    一.简介 在互联网数据大爆炸时代,对数据处理的要求越来越高,很明显单实例数据库已经不能满足需求了,这时候数据库的中间件便应运而生.中间件聚集多实例来提供更强的处理能力,并且隐藏了多实例产生的复杂性.m ...

  2. mysql，简单介绍一下索引

    汉字很多,人力有时尽,人不可能记住所有的字,为了解决这个问题,于是有了字典.数据库里的数据很多,为了方便检索,于是有了索引. 索引,是一种数据结构,在这种数据结构中实现了高级的查找算法,索引可以帮助我 ...

  3. java.lang.UnsupportedClassVersionError: action/Login : Unsupported major.minor version 52.0 (unable to load class action.Login)异常

    用myeclipse新建一个web项目,用了struts2框架,tomcat启动的时候报了这个错误. 我的问题原因是tomcat7的运行环境不知道为什么设置成了myeclipse1.7的jre,我给它 ...

  4. 读EntityFramework.DynamicFilters源码_心得_单元测试03

    上个星期我们只是显示了一个示例,怎么在EF的框架内,注入我们拓展的动态过滤器 第一步:安装EntityFramework.DynamicFilters 第二步:重写OnModelCreating方法 ...

  5. Git Bash Here常用命令以及使用步骤

    1.首先,要clone项目代码: git clone 链接地址 2.更新代码: git pull 3.添加修改过的文件.文件夹: git add 修改过的文件,文件夹 4.提交并注释: git com ...

  6. FCKeditor 添加行距、字体功能 （转载）

    一.首先为FCKeditor添加外部插件在fckeditor/editor/plugins文件夹下建立新文件夹lineHeight,并在其中创建fckplugin.js文件,在其文件中办輸入代码:FC ...

  7. ueditor默认字体和字号修改

    ueditor编辑器默认字号是16号,默认字体为sans-serif,显得有些难看,所以决定修改默认值.配置文件ueditor.config.js可以修改整个编辑器配置项,里面有配置项fontfami ...

  8. GIS与FVCOM模型耦合的关键技术及解决思路

    1. FVCOM本身为Linux下的MPI程序,首先将其移植到Windows下,可以编译成控制台程序. 2. FVCOM的前处理由GIS完成剖分网格和初始设定等工作. 3. FVCOM的输出采用自定义 ...

  9. DLL调用的两种方式（IDE：VC6.0，C++）

    原文:http://www.cnblogs.com/Pickuper/articles/2050409.html DLL调用有两种方式,一种是静态调用,另外一种是动态调用 (一)静态调用 静态调用是一 ...

  10. 【Udacity】朴素贝叶斯

    机器学习就像酿制葡萄酒--好的葡萄(数据)+好的酿酒方法(机器学习算法) 监督分类 supervised classification Features -->Labels 保留10%的数据作为 ...