javascript拖拽效果延伸学习
本文总结一下，拖拽所延伸出来的一些效果，供大家参考，具体内容如下
1.实现拖拉图片时，带框的效果。即当鼠标拖动某一个图片或物体时，其原有位置扔保留其型。
这种效果，其实很简单，主要是另外创建一个物体，使其与被拖拽的物体，宽和高一样，然后，将其变为拖拽的对象。
直接上代码：
<html
<head>
<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体，其必须定位为absolute
{
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
var oNewDiv=document.createElement('div');
oNewDiv.className='box';
oNewDiv.style.width=oDiv.offsetWidth-2+'px';//将2px的边框去掉
oNewDiv.style.height=oDiv.offsetHeight-2+'px';
oNewDiv.style.left=oDiv.offsetLeft+'px';
oNewDiv.style.top=oDiv.offsetTop+'px';
document.body.appendChild(oNewDiv);
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oNewDiv.style.left=oEvent.clientX-disX+'px';
oNewDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
document.body.removeChild(oNewDiv);
oDiv.style.left=oNewDiv.style.left;
oDiv.style.top=oNewDiv.style.top;
};
};
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
2.关于窗口拖拉放大缩小的效果，就是在上面的div之中再包一个div。
<html
<head>
<style>
#div1 {width:10px; height:10px; background:url(images/1.gif); position:absolute;bottom: 0;right: 0}//拖拉的物体，改为图片
#div2{width: 200px;height: 200px;position: relative;background: #ccc;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体，其必须定位为absolute
{
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
var oNewDiv=document.createElement('div');
//oNewDiv.className='box';
oNewDiv.style.width=oDiv.offsetWidth-2+'px';
oNewDiv.style.height=oDiv.offsetHeight-2+'px';
oNewDiv.style.left=oDiv.offsetLeft+'px';
oNewDiv.style.top=oDiv.offsetTop+'px';
document.body.appendChild(oNewDiv);
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv2.style.width=oEvent.clientX-disX+'px';//这里是它的父级
oDiv2.style.height=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
document.body.removeChild(oNewDiv);
oDiv.style.left=oDiv2.style.left;
oDiv.style.top=oDiv2.style.top;
};
};
};
</script>
</head>
<body>
<div id='div2'>
<div id="div1">
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
JS组件Bootstrap ContextMenu右键菜单使用方法
今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst
-
JavaScript 对任意元素,自定义右键菜单的实现方法
一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对
-
ExtJs grid行 右键菜单的两种方法
在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘
-
利用JS重写Cognos右键菜单的实现代码
复制代码 代码如下: <!--菜单样式--> <STYLE type=text/css> .cMenu { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 14px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 150px; CURSOR: default; COLO
-
JS实现仿Windows7风格的网页右键菜单效果代码
本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm
-
js禁止页面复制功能禁用页面右键菜单示例代码
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在
-
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri
-
基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
-
javascript拖拽效果延伸学习
本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果.即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型. 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象. 直接上代码: <html <head> <style> #div1 {width:100px; height:100px; background:yellow; position:absolute;} .box{bord
-
JavaScript拖拽效果示例网页解决快速拖拽的问题
JavaScript拖拽示例网页--解决快速拖拽的问题 .drag{border:1px solid; width:400px; background:#CCCCCC;} #test1{ top:20px;} #test2{ left:40px;} var dragElement = null; var mouseY; var mouseX; var x=""; var y=""; var max = 1; function dragInit(node){ if(n
-
JavaScript 实现拖拽效果组件功能(兼容移动端)
页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验.日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧. 预期目标 实现一个 Class 类,通过该 Class,可以将任意 DOM 元素(比如 div)一键变为可拖拽状态,也可以恢复成原来的状态,例如这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset=
-
javascript轻量级库createjs使用Easel实现拖拽效果
我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascript库,是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,利用createjs可以构建出许多有趣的动画游戏.例如围住神经猫,看你有多色等Html5游戏. 二.CreateJS有哪几款工具? createjs里面共有四大引擎: EaselJS:主要用于动画.向量及位图的绘制.提供支持移动设备触控的一系列方法(click.mousedown.pressup.
-
JavaScript实现拖拽效果
要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || window.event; 根据需求需要用到的拖拽效果的坐标 clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离) offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 pageX:
-
JavaScript实现简单拖拽效果
本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下 先看实现的效果: 思路:里面用到了三个事件,鼠标按下.移动.松开事件 那么首先创建盒子并且给它赋予css样式 HTML: // html <div> <p>我是个蓝色的盒子</p> </div> CSS: CSS *{margin: 0;padding: 0;} div{ width: 100px; height: 100px; background-color:
-
Javascript实现登录框拖拽效果
本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下 需求分析 1.点击弹出登录框 2.在登录框的特定区域可以将登录框拖拽至任意位置 3.可以关闭登录框,并且下一次点击弹出登录框归位 具体实现 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
-
JavaScript实现div的鼠标拖拽效果
本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re
-
JavaScript实现简单的拖拽效果
本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.先搭架子: * { margin: 0; padding: 0; } p { background: skyblue; text-align: center; } html, body { width: 100%; height: 100%; } .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; backgro
-
JavaScript实现鼠标拖拽效果
本文实例为大家分享了JavaScript实现鼠标拖拽效果的具体代码,供大家参考,具体内容如下 这次的效果图如下: 我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢? 我们需要用到三个函数: onmousedown.onmousemove.onmouseup,分别表示鼠标按下.鼠标移动.鼠标抬起 在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始