<!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. svn在commit后报错：is scheduled for addition, but is missing

    今天通过svn 的cr(code review)代码审核后,我欲执行svn ci -m"xxxxxxx(提交注释) ISSUE=3380305",但是没有提交成功,SVN报错啦! ...

  2. Hadoop 完全分布式部署(三节点)

    用来测试,我在VMware下用Centos7搭起一个三节点的Hadoop完全分布式集群.其中NameNode和DataNode在同一台机器上,如果有条件建议大家把NameNode单独放在一台机器上,因 ...

  3. spring boot 定时任务

    定时任务实现方式 三种: 1) Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务. 最早的时候就是这样写定时任务的. 2) 开源的第三方框 ...

  4. Ascii码 unicode码 utf-8编码 gbk编码的区别

    ASCII码: 只包含英文,数字,特殊符号的编码,一个字符用8位(bit)1字节(byte)表示 Unicode码: 又称万国码,包含全世界所有的文字,符号,一个字符用32位(bit)4字节(byte ...

  5. window.open在Safari中不能打开的问题

    在调移动支付问题的时候遇到过,用window.open打开一个微信支付链接,唤醒移动支付,在IOS下死活唤醒不了,是js代码冲突问题...是click事件IOS下不兼容问题...最后定位到window ...

  6. laravel后台注册登入

    1.只需要在新安装的 Laravel 应用下运行 php artisan make:auth 和 php artisan migrate,这两个命令会生成用户登录注册所需要的所有东西 2.你会发现 h ...

  7. python anaconda 安装 环境变量 升级 以及特殊库安装

    Anaconda 是一个旗舰版的python安装包, 因为普通的python没有库, 如果需要安装一些重要的库, 要经常一个一个下载,会非常麻烦. 所以这个一个集成的, 可以手动批量升级的软件. 而且 ...

  8. C++基础--回调的应用

    一.类成员函数的回调 1. 类成员函数的回调,函数的调用必须通过类来调用: CallBack.h #pragma once class CallBack { public: CallBack(); ~ ...

  9. 基础架构之Mongo

    项目需求中,有些需求的数据是不必长时间持久化或一些非结构化设计,这时可以考虑用Mongo作为存储,具体介绍介绍详见官方 https://www.mongodb.com,这篇文章主要介绍安装及启用身份认 ...

  10. Office - Word 2013

    1. 使用 Quick Parts 向Word中添加自定义属性: 2.