正文

javascript实现网页元素的拖拽效果

cxchanpin  2022-02-10  365

关键词：

以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。

技术分享

实现该效果的HTML页面代码例如以下所看到的：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #xixi {
            width:200px; height: 200px; position:absolute;
            left: 50px; top: 50px; background-color: lightcyan;
        }
        #haha {
            position:absolute; left:300px; top:300px;
            background-color: yellow; width:200px; height: 200px;
        }

    </style>
    <script type="text/javascript" src="js/mylib.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            var obj1 = createDraggableObject();
            var obj2 = createDraggableObject();
            obj1.init($(‘xixi‘));
            obj2.init($(‘haha‘));
        };
    </script>

</head>
<body>
    <div id="xixi">Fuck!</div>
    <div id="haha">Shit!</div>
</body>
</html>

外部JavaScript文件代码例如以下所看到的：

/**
 * 依据id获取页面元素
 * @param id
 * @returns {HTMLElement}
 */
function $(id) {
    return document.getElementById(id);
}

/**
 * 创建可拖拽对象的工厂方法
 */
function createDraggableObject() {
    return {
        obj: null, left: 0, top: 0,
        oldX: 0, oldY: 0, isMouseLeftButtonDown: false,
        init: function (obj) {
            this.obj = obj;
			var that = this;
            this.obj.onmousedown = function (args) {
                var evt = args || event;
                this.style.zIndex = 100;
                that.isMouseLeftButtonDown = true;
                that.oldX = evt.clientX;
                that.oldY = evt.clientY;
				if (this.currentStyle) {
                    that.left = parseInt(this.currentStyle.left);
                    that.top = parseInt(this.currentStyle.top);
                }
                else {
                    var divStyle = document.defaultView.getComputedStyle(this, null);
                    that.left = parseInt(divStyle.left);
                    that.top = parseInt(divStyle.top);
                }
            };
            this.obj.onmousemove = function (args) {
                that.move(args || event);
            };
            this.obj.onmouseup = function () {
                that.isMouseLeftButtonDown = false;
                this.style.zIndex = 0;
            };
        },
        move: function (evt) {
            if (this.isMouseLeftButtonDown) {
                var dx = parseInt(evt.clientX - this.oldX);
                var dy = parseInt(evt.clientY - this.oldY);
                this.obj.style.left = (this.left + dx) + ‘px‘;
                this.obj.style.top = (this.top + dy) + ‘px‘;
            }
        }
    };
}

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

实现元素简单的拖拽

1.通过元素的offsetLeft，offsettop实现元素的拖拽1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title></title>7<styletype="text/css">8.box{9width:100px;10height:100px 查看详情

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的，我直接拿过来了，地址http://www.imooc.com/le... 查看详情

通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽

...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情

原生拖拽,拖放事件(draganddrop)

参考技术A拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.一个完整的draganddrop流程通常包含以下几个步骤:1.设置可拖拽目标.设置属性draggable="true"实... 查看详情

用javascript实现拖拽带来的种种问题

第一篇，先水一下，用javascript实现简单的拖拽。主要还是想通过demo的形式总结一下各种event对象属性。首先先看一下，这个demo最终实现的效果：主要涉及的属性有：MouseEvent.clientX、MouseEvent.clientY、HTMLElement.offsetLeft、HTMLElement.off... 查看详情

three.js如何实现在x,y,z轴上的拖拽

...ateElement('script'); script.type='text/javascript'; script.src='https://raw.github.com/zz85/ThreeLabs/master/DragControls.js'; document.body.appendChild(script); script.onload=functio... 查看详情

react实现拖拽功能(代码片段)

实现效果：（可戳https://codepen.io/wenr/pen/EGEQxp查看）因为工作中会用到JIRA所以想实现一下相似的功能，顺便学习一下H5的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码... 查看详情

jq实现登陆页面的拖拽功能

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery-1.9.1.min.js"type="text/javascript"charset="utf-8"></script> <title></title> 查看详情

javascript实现拖拽元素对齐到网格（每次移动固定距离）

这几天在做一个拖拽元素的附加功能，就是对齐到网格，实际上就是确定好元素的初始位置，然后拖拽元素时，每次移动固定的距离。让元素都可以在网格内对齐。先上效果图，然后在详细说明一下细节问题做了一个gif图，可以... 查看详情

玩玩flutter的拖拽——实现一款万能遥控器(代码片段)

...然想到两年前写过的一篇博客：玩玩Android的拖拽——实现一款万能遥控器，就想着用Flutter来复刻一下。顺便练习一下Flutter里的拖拽Widget。先给大家看看最终的实现效果以及与Android版的对比（个人觉得还原度很高ÿ... 查看详情

简单实现svg的拖拽和缩放

...，来控制svg（正方形）刚好在父元素内，radio是缩放比例实现方式是<fontcolor=\'red\'>重绘</font>，所以元素太多会造成卡顿。一、拖拽我们来分析拖拽的过程，鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mo... 查看详情

arcgisjs学习笔记2实现仿百度的拖拽画圆

...产品外，其他的真的不敢恭维。在上一篇笔记里，我已经实现了自定义的地图测量模块。在百度地图里面（其他地图）都有一个周边搜索的功能，拖拽画一个圆，然后以圆半径进行搜索（也就是缓冲区╮(╯_╰)╭）。这次的... 查看详情

4,简单的拖拽效果

classMainextendsegret.DisplayObjectContainer{/***入口文件,最先执行的构造方法*这会实例化一个和手机屏幕一样大的舞台*/publicconstructor(){super();this.once(egret.Event.ADDED_TO_STAGE,this.begin,this);}/***入口文件加载成功后执行的方法*也是逻辑的开始,... 查看详情

javascript面向对象的拖拽

一、body<divid="box"></div>二、css<style>#box　　position:abaolute;　　top:0;　　left:0;　　width:100px;　　height:100px;</style>三、JavaScript<script>　　classDrag　　　　constructor(el)　查看详情

h5的拖放事件(拖拽删除)

...件：拖放事件H5的拖放事件提供了多个接口：1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元... 查看详情

原生拖拽太拉跨了，纯js自己手写一个拖拽效果，纵享丝滑(代码片段)

...元素拖拽，通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：笔者因为之前有个... 查看详情

screentoviewportpoint，worldtoviewportpoint，viewporttoworldpoint的运用，实现一个简单的对三维中物体的拖拽移动效果

　　众所周知，我们手机或者手机屏幕上的坐标是一个二维平面的的坐标值，而且这个坐标是一像素为单位的，也就是说这个是会根据你用的设备的不同，你手机或者电脑上的坐标的长宽最大值也就不同。　　之前不太了解标题... 查看详情