美文网首页
原生js实现可拖拽功能

原生js实现可拖拽功能

作者: Iamsoulmate | 来源:发表于2020-05-18 18:40 被阅读0次

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

var downX , downY;
var div = document.getElementsByTagName("div")[0];  
div.addEventListener("mousedown",function(e){
    downX = e.pageX-parseInt(div.style.left);
    downY = e.pageY-parseInt(div.style.top);
    window.addEventListener("mousemove",move);  
    window.addEventListener("mouseup",function(){
        window.removeEventListener("mousemove",move);
    })  
})
function move(e){
    div.style.left = (e.pageX - downX) + "px";
    div.style.top = (e.pageY - downX) + "px";
}

*html部分

<div style="position:absolute;
            left:100px;
            top:100px">
            分享
</div>

*css部分

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f40;
    line-height: 100px;
    text-align: center;
    color: white;
    font-size: 20px;
}

相关文章

  • 原生js实现可拖拽功能

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

  • 原生js实现拖拽功能

    在前端技术日新月异,飞速发展的当下,涌现出了很多优秀的开源框架以及优秀的开源组件,这些都是优秀的前端开发者的技术成...

  • 实现拖拽

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

  • js拖拽html元素工具类

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

  • React 实现组件拖拽功能

    ##实现React组件的拖拽功能 HTML5原生支持拖拽功能,没有看过相关文档,恰好自己想实现一下React组件...

  • 原生js实现拖拽

    onmousedown,onmousemove,onmouseup 先看js代码.static定位:positio...

  • JS实现拖拽功能

    拖拽功能是我们日常项目中常用的效果,今天我们就来研究一下如何实现简单的拖拽功能。想实现拖拽功能其实很简单,主要需要...

  • 【React】Get Started

    1. React之初衷 首先用原生JS实现一个简单的功能: 使用React实现同样的功能: 2. 原生js VS ...

  • 原生JS实现可横向拖拽div方法

    function dragDiv(doucument,className){var theobject = nul...

  • Vue实现拖拽穿梭框功能四种方式

    一、使用原生js实现拖拽 点击打开视频讲解更加详细[https://www.bilibili.com/video/...

网友评论

      本文标题:原生js实现可拖拽功能

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