<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8" />

    <title>拖拽js</title>

    <style type="text/css">

  html, body {

    overflow:hidden;

  }

  body, div, {

    margin:0;

  padding:0;

  }

  body {

    color:#fff;

    font:12px/2 Arial;

  }

  p {

    padding:0 10px;

    margin-top:10px;

  }

  span {

    color:#ff0;

    padding-left:5px;

  }

  #box {

    position:absolute;

    width:300px;

    height:150px;

    background:#D5CDDA;

    border:2px solid #ccc;

    top:150px;

    left:400px;

    margin:0;

  }

  #drag {

    height:25px;

    cursor:move;

    background:#724a88;

    border-bottom:2px solid #ccc;

    padding:0 10px;

  }

</style>

</head>

<body>

<div id="box">

  <div id="drag">拖动区域</div>

    被拖动的整个div

  </div>

</body>

</html>

<script src="js/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(function(){

  moveBox($("#box"),$("#drag")) ;

})

//B被拖动的div，BT可拖动区域

function moveBox(B,BT){

  var bDrag = false;

  var _x,_y;

  BT.mousedown(function(event){

var e=event || window.event;

bDrag = true;

    _x=e.pageX-B.position().left;

    _y=e.pageY-B.position().top;

    return false

  })

  $(document).mousemove(function(event){

    if(!bDrag) return false;

    var e=event || window.event;

    var x=e.pageX-_x;

    var y=e.pageY-_y;

    console.log(B.position());

    var maxL = $(document).width() - B.outerWidth();

    var maxT = $(document).height() - B.outerHeight();

    x = x < 0 ? 0: x; x = x > maxL ? maxL: x;

    y = y < 0 ? 0: y; y = y > maxT ? maxT: y;

    B.css({left:x,top:y});

    return false

  }).mouseup(function(){

    bDrag = false;

    return false

  })

}

</script>

拖拽js的更多相关文章

  1. 最好的拖拽js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 拖拽js和jq写法

    第一种原生js写法 window.onload=function () { var oDrag=document.getElementById('drag'); oDrag.onmousedown=f ...

  3. 原生拖拽js利用localstorage保存位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  5. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

  6. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

随机推荐

  1. Go语言项目的错误和异常管理 via 达达

    Go语言项目的错误和异常管理 最近连续遇到朋友问我项目里错误和异常管理的事情,之前也多次跟团队强调过错误和异常管理的一些概念,所以趁今天有动力就赶紧写一篇Go语言项目错误和异常管理的经验分享. 首先我 ...

  2. CF GYM 100703L Many questions

    题意:题意真坑……龙要问一系列问题,王子骑士公主分别以一个整数回答,如果王子和公主答案差的绝对值比骑士和公主答案差的绝对值小则说王子和公主的答案更相似,反过来如果前者比后者大则说骑士和公主的答案更相似 ...

  3. C# 发送邮件整理，包括控制台程序、WPF、WebForm 及 ASP.NET MVC

    一直想把发送邮件的功能掌握,总是各种情况拖着了,这两天终于看了一下,整理一下,希望能帮到想学的. 发送邮件使用SMTP服务器,有两种方案,一种是使用IIS的SMTP功能:另一种是直接使用邮件供应商的S ...

  4. bzoj 1834 [ZJOI2010]network 网络扩容（MCMF）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1834 [题意] 给定一个有向图,每条边有容量C,扩容费用W,问最大流和使容量增加K的最 ...

  5. HW7.7

    public class Solution { public static void main(String[] args) { double[][] points = { {-1, 0, 3}, { ...

  6. hdu5792--World is Exploding

    题意:给一个数列,求四个各不相同的数,一个逆序对,一个正序对,求多少组这样的四个数. 题解:辣鸡如我,还是上官方题解了. rg(i)就是i右边比i大的数的个数,rs(i)就是i右边比i小的数的个数. ...

  7. 设置IE浏览器代理上网

    在局域网中,服务器可以直接通过IE网上冲浪,而工作站要想通过IE上网,如果是在服务器使用代理软件的情况下,其IE需要设置代理. 步骤一:启动IE浏览器,选择"工具",再" ...

  8. Google Android官方文档进程与线程(Processes and Threads)翻译

    android的多线程在开发中已经有使用过了,想再系统地学习一下,找到了android的官方文档,介绍进程与线程的介绍,试着翻译一下. 原文地址:http://developer.android.co ...

  9. [iOS基础控件 - 4.2] APP列表 字典转模型Model

    A.使用字典加载数据的缺点 1.用户自行指定key,容易出错 2.存入.取出都需要key,容易混乱   B.模型 (MVC中的model) 1.字典与模型对比: (1)字典:存储数据,通过字符串类型的 ...

  10. 转载 C#中使用结构来传递多个参数

    C#中当参数超过5个时,建议用结构来传递多个参数. 示例代码如下: public struct MyStruct { public string str; public int number; } c ...