美文网首页
原生拖拽代码

原生拖拽代码

作者: Augenstern___ | 来源:发表于2018-03-26 19:05 被阅读0次

style:

      *{

            margin:0;

            padding:0;

    }

       #box{

            width:100px;

            height:100px;

            background:red;

            position:absolute;

    }

注:拖拽时元素需要定位   (绝对定位)  

js代码:

      var obox = document.getElementById("box");

      obox.onmousedown = function(ev){

//兼容

       var oEvent = ev || event;

//获取距离事件源的距离

       var left = oEvent.clientX - obox.offsetLeft;

       var top = oEvent.clientY - obox.offsetTop;

      document.onmousemove = function(ev){

//兼容

       var oEvent = ev || event;

      obox.style.left = oEvent.clientX - left + "px";

      obox.style.top = oEvent.clientY - top + "px";

   }

      document.onmouseup = function(){

      document.onmousemove = null;

       document.onmouseup = null;

 }

 }

相关文章

  • 原生拖拽代码

    style: *{ margin:0; padding:0; } #box{ ...

  • JavaScript实现图片和div拖拽

    今天需要一个图片拖拽功能,代码量小,就用原生JavaScript写吧! 我们拖拽的动作由这么一组流程:1、鼠标在图...

  • 如何完成一个js原生窗口拖拽?

    窗口拖拽这一功能在web app中经常要用到,所以我们需要写一个原生的拖拽功能。 1.html代码 在id为myD...

  • 原生js实现可拖拽功能

    原生js实现一个可全局拖拽的按钮功能,直接上代码*js部分 *html部分 *css部分

  • 实现拖拽

    原生js实现 HTML5原生实现:拖拽draggable属性、DataTranfers对象

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • js拖拽html元素工具类

    复制就能用的拖拽js方法 原生js实现拖拽元素方法 使用(注意拖拽目标元素需绝对定位 position: 'abs...

  • UI手势控件

    一、拖拽 示例代码: 复制代码 1 // 2 // YYViewController.m 3 // 06-拖拽事件...

  • 原生js实现拖拽弹性重力运动

    刚开始学前端,记录下学到的知识,原生js实现拖拽弹性重力运行。记录下,直接上代码: html和css部分 js部分

  • 拖拽库

    拖拽库封装代码

网友评论

      本文标题:原生拖拽代码

      本文链接:https://www.haomeiwen.com/subject/jftdcftx.html