JavaScript实现拖拽和缩放效果

本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>拖拽缩放</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
  * {
    margin: 0;
    padding: 0
  }

  #box {
    width: 100%;
    height: 100%;
    position: relative;
    background: #4bb0bb
  }

  #drag {
    width: 200px;
    height: 200px;
    position: relative;
    background: #691fff;
    cursor: move;
  }

  #scale {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #ffa500;
    cursor: se-resize;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
</style>

<body>
  <div id="box">
    <div id="drag">
      <div id="scale"></div>
    </div>
  </div>
</body>
<script>

  window.onload = function () {
    var box = document.getElementById("box")
    var drag = document.getElementById("drag")
    var scale = document.getElementById("scale")
    // mousedown mousemove mouseup
    dragTool(drag)
    scaleTool(drag, scale, box)
    // 拖拽方法
    function dragTool(node) {
      node.onmousedown = function (ev) {
        // 浏览器兼容处理
        var e = ev || window.event;
        // 鼠标按下记录相对位置
        // 水平方向都距离 = 当前鼠标左边的距离 - 被拖拽元素距离左边的距离
        var offsetX = e.clientX - node.offsetLeft;
        // 垂直方向都距离 = 当前鼠标都上边的距离 - 被拖拽元素距离距离的距离
        var offsetY = e.clientY - node.offsetTop;
        // 鼠标移动和被拖拽的元素是相对的 这里是鼠标拖拽的物体在整个页面上移动 所以
        // move加在document上
        document.onmousemove = function (ev) {
          // 当前鼠标的事件对象
          var e = ev || window.event;
          // 定义 currentLeft = 当前鼠标位置 - 距离左边的距离
          var currentLeft = e.clientX - offsetX;
          // 定义 currentTop = 当前鼠标上边位置 - 距离上边的距离
          var currentTop = e.clientY - offsetY
          // 限制左出界 最左是 0
          if (currentLeft <= 0) {
            currentLeft = 0;
          }
          // 当前窗口的宽 浏览器兼容
          var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
          // 限制右边出界 如果大于当前窗口的宽 那么就让它等于当前窗口的宽减去当前元素的offsetWidth 也就是留在原地
          if (currentLeft >= windowWidth - node.offsetWidth) {
            currentLeft = windowWidth - node.offsetWidth;
          }
          // 设置上出界 最上边是 0
          if (currentTop <= 0) {
            currentTop = 0;
          }
          // 当前窗口的高 浏览器兼容
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
          // 限制下边出界 如果大于当前窗口的高 减去 本身的高 那么就让它等于 当前窗口的高减去本身的高
          if (currentTop >= windowHeight - node.offsetHeight) {
            currentTop = windowHeight - node.offsetHeight;
          }
          // 当前被拖拽元素的 left 值 等于上面计算出的 currentLeft
          node.style.left = currentLeft + 'px';
          // 当前被拖拽元素的 top 值 等于上面计算出的 currentTop
          node.style.top = currentTop + 'px';
        }
      }
      // 鼠标弹起取消拖拽 这里添加到 node 元素对象也可以的
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }

    // 缩放
    function scaleTool(drag, scale, box) {
      scale.onmousedown = function (e) {
        //阻止冒泡 避免缩放触发移动事件
        e.stopPropagation()
        // 取消事件的默认动作
        e.preventDefault()
        // 定义position
        var position = {
          'w': drag.offsetWidth, // 被缩放元素的offsetWidth
          'h': drag.offsetHeight, // 被缩放元素的offsetHeight
          'x': e.clientX, // 当前窗口鼠标指针的水平坐标
          'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
        }
        drag.onmousemove = function (ev) {
          ev.preventDefault()
          // 设置最大缩放为30*30 Math.max取最大值
          var w = Math.max(30, ev.clientX - position.x + position.w)
          var h = Math.max(30, ev.clientY - position.y + position.h)

          // 设置最大的宽高
          w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
          h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
          drag.style.width = w + 'px';
          drag.style.height = h + 'px';
        }
        // 鼠标离开和抬起取消缩放
        drag.onmouseup = function () {
          drag.onmousemove = null;
          drag, onmouseup = null;
        }
        drag.onmouseleave = function () {
          drag.onmousemove = null;
          drag, onmouseup = null;
        }
      }
    }
  }

</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS实现简单移动端鼠标拖拽

    本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

  • javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • Sortable.js拖拽排序使用方法解析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • js实现盒子拖拽动画效果

    本文实例为大家分享了js实现盒子拖拽动画的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <style>

  • 使用js实现的简单拖拽效果

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <ti

  • js实现鼠标拖拽缩放div实例代码

    封装为了jq插件,如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts = $.extend(def,options);// 扩展参数,使用默认值或传参 //设置最大/最小宽度 var max_width = opts.maxW, min_width = opts.minW; //

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • javascript实现表格排序 编辑 拖拽 缩放

    简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 复制代码 代码如下: <!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/xht

随机推荐