JS完美拖拽

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #box{
        height: 100px;
        width: 100px;
        background:red;
        position: absolute;
        cursor:move;
      }
    </style>
  </head>
  <body>
    <div id="box">

    </div>
  </body>
</html>
<script>
  var oBox = document.querySelector("#box");

  oBox.onmousedown = function(evt){
    var e = evt || event;
    var offsetX = e.offsetX;
    var offsetY = e.offsetY;
    document.onmousemove = function(evt){
      var e = evt || event;
      var x = e.pageX - offsetX;
      var y = e.pageY - offsetY;
      if(x<0){
        x = 0;
      }
      var maxLeft = window.innerWidth - oBox.offsetWidth;

      if(x > maxLeft){
        x = maxLeft;
      }
      if(y<0){
        y = 0;
      }
      var maxTop = window.innerHeight - oBox.offsetHeight;
      if(y > maxTop){
        y = maxTop;
      }
      oBox.style.left = x + "px";
      oBox.style.top = y + "px";
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  }
</script>

原文地址:https://www.cnblogs.com/fengzhi/p/12069970.html

时间: 2024-11-01 10:56:05

JS完美拖拽的相关文章

js完美拖拽封装及其案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #bo

完美拖拽及回放

2019-08-09 21:54:40 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>完美拖拽</title> <style type="text/css"> html, body { overflow: hidden; } body, div, h2, p { margin: 0; padding: 0; }

jquery.dragsort.js 实现拖拽过程遇到的问题

1.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative.这个问题在火狐等其他浏览器是不存在的. 2.如果拖动的li所在容器出现了滚动条,当滚动条滑到最下面的时候,拖拽下面的li的浮动层位置会出现偏移.解决的办法是在jquery.dragsort.js中,this.draggedItem.css({ top: top, left: left });这句

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

gridster.js–可拖拽的网格插件

gridster.js–可拖拽的网格插件 gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. \ 主要特性 1.只依赖jQuery 2.支持元素的添加和删除 3.文档比较全 4.拥有测试用例,你可以查看你的浏览器的测试结果 5.比较适合开发益智游戏 如何使用 引入类库,包括jQuery和gridster.js: <script src="http://ajax.googleapis.com/ajax/libs/

用js实现拖拽功能

平常我们在网上可以看到,按住一张图片,然后拖到另一处去,前天在网上看石川(Blue)老师 的js课堂,有见过这个,写下来与大家分享一下: 1,先画个div小红块,样式设置如下: #div1{width: 200px; height: 200px; background-color: red; position:absolute;} 这里的positon属性很重要,如果没有这个,根本拖不动你可以试一下. 2,然后需要用到三个事件,onmousedown, onmousemove, onmouseu

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

JS—实现拖拽

JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动                因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面                同时将mouseup也改为document上面的事件                IE下直接用obj.s

js实现拖拽框

纯js版的拖拽框,该效果很简单 直接看代码..... <!doctype html> <html> <head> <meta charset="urf-8"/> <style> #box{ border:1px solid #ccc; position:absolute; border-radius:4px; border-shadow:10px 10px 5px #888888; } #box h1{ margin:0; p