纯js拖拽参考

function myDrag(obj){
    obj.onmousedown=function(e){
        var e=e||window.event;
        var diffX=e.clientX-this.offsetLeft;
        var diffY=e.clientY-this.offsetTop;
        document.onmousemove=function(e){
            var e=e||window.event;
            var left=e.clientX-diffX;
            var top=e.clientY-diffY;
            var leftMax=document.documentElement.clientWidth-obj.offsetWidth;
            var topMax=document.documentElement.clientHeight-obj.offsetHeight;
            if(left<0){
                left=0;
            }else if(left>leftMax){
                left=leftMax;
            }
            if(top<-20){
                 top=-20;
            }else if(top>topMax){
                top=topMax;
            }
            obj.style.left=left+"px";
            obj.style.top=top+"px";
        }
        document.onmouseup=function(){
        document.onmousemove=null;
        }
    }
}
时间: 2024-11-16 03:08:01

纯js拖拽参考的相关文章

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

js拖拽效果实现

<!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" xml:lang="en"><head>    <meta

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

php+mysql+js拖拽div实例

php+mysql+js拖拽div实例 代码已改好,放在目录下可直接使用.适合新手学习! 效果如下图,比较适合做可以移动,拖拽的留言板. 实现思路: 思路也是很简单了,就是js获取定位后的数据,然后请求给PHP,php将定位的横向坐标和纵向坐标存到数据库! 代码实例下载地址:http://download.csdn.net/detail/u011986449/8099045

js拖拽分析

js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left 的值 具体 mousedown div.onmousedown=function(event){ var event=event||window.event var diffX=event.clientX-div.offsetLeft var diffY=event.clientY-div.off

JS拖拽

拖拽原理    a, 被拖拽物体绝对定位    b, 按下时记录鼠标在拖拽物体上的位置,拖拽时鼠标在拖拽物体上的位置保持不变    c, 鼠标移动时改变拖拽物体位置 1,简易拖拽 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽原型</title> <script type="text/javascript" sr

js拖拽效果的实现

1.最基础的写法 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:200px; height:200px; background:yellow; position:absolute;} 8 </style> 9 <sc

js拖拽 jquery实现

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 5 <title>拖拽</title> 6 <style> 7 #drag{ 8 position:absolute; 9 width:200px; 10 height:10