<!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. Asp.net MVC5系列——第一个项目

    转自http://www.cnblogs.com/wolf-sun/p/3888160.html 概述 在这一部分我们添加一个新的控制器HelloWorldController类,以便使用视图来向客户 ...

  2. spring-boot-starter-data-elasticsearch实现es的增删查改

    首先,必须吐槽一下,springboot这个elasticsearch包对于elasticsearch的支持十分不友好,目前只支持很低版本的elasticsearch,如果有哪位大牛知道如何兼容更高版 ...

  3. SQL2008使用with求余额表，流水账方式

    1.先准备数据,将要求余额的表数据插入临时表 SELECT Serial, VoucherNum, SubjectNum, SubjectName, Direction, Amount INTO #T ...

  4. animate默认时长所带来的问题及解决

    一.需求描述 做一个进度条长度逐渐减少的动画,当进度条长度小于等于0时,关闭动画,并弹出透明底板显示新提示. 二.问题描述 初始代码如下: //设置进度条初始长度 var progressLength ...

  5. webapi下载文件

    [HttpGet] public IHttpActionResult ExportData() { ... var dt = ExcelHelper.ListToDataTable(list); va ...

  6. pdf预览

    从服务器取回pdf流数据,通过iframe在html页面展示 不废话,,直接代码: <html> <head> <meta charset="UTF-8&quo ...

  7. base64的编码解码的一些坑

    1. //编码 value = base64encode(utf16to8(src)) //解码 value = utf8to16(base64decode(src)) 这里:base64编码之前先转 ...

  8. MySQL数据库、表的字符编码

    用MySQL命令行新建数据库和表时默认的字符编码是latin1,但是在实际开发过程中一般都是使用utf8格式的编码.操作如下: 1.修改数据库字符编码 mysql> alter database ...

  9. Log4Net使用教程

    简介 为方便跟踪程序运行情况,我们可以记录系统运行异常日志,winform和web都可以通过继承异常或者try来实现. 官方网站:http://logging.apache.org/log4net/ ...

  10. win2008 svn 搬迁

    公司说电脑不够用,要我们将本地开发用的服务器贡献出来给别人当办公电脑用..汗 将SVN从一个win2008服务器上搬迁到另一个win2008服务器上面. 先将服务器上面的配置好的svn 跟目录备份下来 ...