简洁易行的JS拖拽代码

var x, y

var drag_ = false

var D = new Function(‘obj‘, ‘return document.getElementById(obj);‘)

var IE = new Function(

‘‘,

‘if(navigator.appName.indexOf("Explorer")>=0)return 1;if(navigator.appName.indexOf("Netscape")>=0)return 2‘)

function Move_obj(obj) {// 1

D(obj).onmousedown = function(e) {

drag_ = true// 4

with (this) {

style.position = "absolute";

temp1 = offsetLeft;

temp2 = offsetTop;// 5

if (IE() == 1) {

x = event.clientX;

y = event.clientY// 6

document.onmousemove = function(e) {// 7

if (drag_ == false)

return false

with (this) {

style.left = temp1 + event.clientX - x + "px";

style.top = temp2 + event.clientY - y + "px"

}

}// 7

}// 6

if (IE() == 2) {

x = e.pageX;

y = e.pageY;// 8

document.onmousemove = function(e) {// 9

if (drag_ == false)

return false

with (this) {

style.left = temp1 + e.pageX - x + "px";

style.top = temp2 + e.pageY - y + "px"

}

}// 9

}// 8

}// 5

document.onmouseup = new Function("drag_=false")

}// 4

}// 1

-------------------------------------------------------------------------------以上是JS代码

使用很简单

在页面中引入JS

<div class="add" id="add"  onmouseover=‘Move_obj("add")‘>拉拽控件</div>

时间: 2024-11-18 06:38:18

简洁易行的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拖拽效果实现

<!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

Xcode如何拖拽选中文字、拖拽代码

不管是文本编辑,还是代码工具,一般都提供了用鼠标拖拽选中文字到指定地方的功能,但是在Xcode里貌似这样有点儿难,你会发现当想拖动的时候会有时候成功,但是大部分时间都是又处于选择状态.一开始我以为是Mac系统的原因,后来发现在其他地方:浏览器就可以拖动,我想这可能是Xcode里去掉了,但是有时候能拖拽是怎么回事.好吧,我不coding了,非得找出来. 废话不多说了: 点击选中的代码(文字),不要移动和松开鼠标左键,当竖线变成箭头之后就可以拖动了,其实不需要多少时间,基本上就是:不要直接点鼠标左键

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拖拽元素原理及实现代码

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 二.拖拽流程中对应的JS事件①鼠标按下会触发onmousedown事件 [javascript] view plain copy obj.onmousedown = function(e) { //.......... } ②鼠标移动会触发onmousemove事件 [javascript] vie

js拖拽换位置,使用数组方法

之前一直需要一个拖拽效果,网上找了些感觉不是不好用,就是写的有些地方让人不太满意,下面贡献一个自己写的.亲测可用,拖动后可互换位置!(带有注释) 方法/步骤 CSS代码部分 <style> * { padding:0;margin:0;list-style: none } html,body { height:100%; overflow:hidden; } ul { margin:50px auto;position:relative; width:1100px; height:500px;