一个简单的js拖拽

window.onload =function(){
    var oDiv = document.getElementById(‘div1‘);
    oDiv.onmousedown= function(ev) {
       var oEvent = ev ||event;
       var divX = oEvent.clientX - oDiv.offsetLeft;
       var divY = oEvent.clientY-oDiv.offsetTop;
       document.onmousemove = function(ev){
        var boxEvent = ev || event;
        var boxX = boxEvent.clientX-divX;
        var boxY = boxEvent.clientY-divY;
        oDiv.style.left = boxX+‘px‘;
        oDiv.style.top = boxY+‘px‘;
       }
       document.onmouseup = function(){
        document.onmousemove=null;
         document.onmouseup = null;
       }
    };
}
时间: 2024-11-10 16:19:38

一个简单的js拖拽的相关文章

一步一步实现JS拖拽插件

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

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

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

再谈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事件①鼠标按下会触发onmousedown事件 [javascript] view plain copy obj.onmousedown = function(e) { //.......... } ②鼠标移动会触发onmousemove事件 [javascript] vie

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-

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

一个能接受外部拖拽的控件(文字或文件)

恩....也是这2天写的一个小东西的需求, 可以拖拽外部文本文件, 或者选择的一段文本到Memo里显示 查了一下资料, 主要从2个方面实现: 1.拖拽文件实现WM_DROPFILES就可以了 2.拖拽文本需要实现IDropTarget接口 针对这个功能, 重新封装了一个Memo出来: TDropMemo = class(TMemo, IUnknown, IDropTarget) private FDropAccept: Boolean; FDTDropAccept: HResult; FFE:

一个简单的js面试题

在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求 给一个数组的最后一个元素加1 结果大于10则给前一个元素加1 并设置当前元素值=0:前一个元素亦是如此,例如 var a=new Array(3,9); a[1]+1; a=[3,9]; 此题看似很简单,只要最后一个元素等于10 就给钱一个元素加1,设置当前元素为0就是了,但还有一种特殊一点的情况,就是当数组的所有