首页 / JAVASCRIPT / JS拖拽的进一步练习，移动与拉伸实现代码

JS拖拽的进一步练习，移动与拉伸实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS拖拽的进一步练习，移动与拉伸实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3848字，纯文字阅读大概需要6分钟。

内容图文

直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？
在此记录一下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖拽扩展</title> <style type="text/css"> *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;} .controlBar{cursor: move;} .controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;} .innerCon{text-align: left; line-height: 20px;} .innerCon p{ padding: 10px; color: #000;} .resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;} .lt{left:0;right:0; cursor:nw-resize;} .tr{right:0;top: 0;cursor:ne-resize;} .rb{right:0;bottom: 0; cursor:nw-resize;} .bl{left:0;bottom:0;cursor:ne-resize;} </style> </head> <body> <h2>按此处拖动</h2> <p>中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容</p> <script type="text/javascript"> (function () { //定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { element = document.getElementById(element); } if (!element) { continue; } if (arguments.length == 1) { return element; } elements.push(element); } return elements; } function $$(tag, parent) { parent = parent || document; return $(parent).getElementsByTagName(tag); } function $$$(str, parent, tag) { if (parent) { parent = $(parent); } else { parent = document; } tag = tag || '*'; var els = parent.getElementsByTagName(tag), arr = []; for (var i = 0, n = els.length; i < n; i++) { for (var j = 0, k = els[i].className.split(' '), l = k.length; j < l; j++) { if (k[j] == str) { arr.push(els[i]); break; } } } return arr; } function bindFunction(obj, func) { return function () { return func.apply(obj, arguments); }; } function bindEvent(element, type, func) { if (element.addEventListener) { element.addEventListener(type, func, false); //false 表示冒泡 } else if (element.attachEvent) { element.attachEvent('on' + type, func); } else { element['on' + type] = func; } } /*定义拖拽类*/ var DragBox = function (options) { var outWarpId = this.outWarpId = options.outWarpId;//获取最外围的包裹层ID var outWarp = $(outWarpId);//获取外围包裹层对象 var controlBox = this.controlBox = $$$('controlBox', outWarp, 'div')[0]; //被拖动的层 this.controlBar = $$$('controlBar', controlBox, 'div')[0]; this.resizeLt = $$$('lt', controlBox, 'div')[0]; this.resizeTr = $$$('tr', controlBox, 'div')[0]; this.resizeRb = $$$('rb', controlBox, 'div')[0]; this.resizeBl = $$$('bl', controlBox, 'div')[0]; /*获取outWarpId信息*/ this.warpWidth = outWarp.offsetWidth - 2; // 对象宽度 this.warpHeight = outWarp.offsetHeight - 2; // 对象高度 this.warpLeft = outWarp.offsetLeft; //对象靠LEFT距离 this.warpTop = outWarp.offsetTop; //对象靠TOP距离 /*定义拖动的对象*/ this.draging = null; this.bind(); }; DragBox.prototype = { moveBox:function (event) { event = event || window.event; var target = event.target || event.srcElement; // 记录滚动条位置 this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop; this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; //记录光标的位置 var mousex = event.clientX; // 光标LEFT var mousey = event.clientY; //光标TOP //console.log('mousex:' + mousex); //console.log('mousey:' + mousey); // 光标相对outwarp层的坐标 var posx = mousex + this.scrollLeft - this.warpLeft; var posy = mousey + this.scrollTop - this.warpTop; // 多次用到this.controlBox 赋值一个短变量名 var my = this.controlBox; // 多次用到this.controlBox.style，赋值一个短变量名 var myStyle = my.style; // 最小尺寸 var minWidth = 200,minHeight = 200; switch(event.type){ case 'mousedown': /*记录相关初始信息*/ if(target.parentNode.className.indexOf('controlBar')!=-1){ this.draging = this.controlBox; //赋值拖动对象 } if(target.className.indexOf('rb')!= -1){ this.draging = this.resizeRb; // 赋值为右下角拖动 } if(target.className.indexOf('tr')!= -1){ this.draging = this.resizeTr; // 赋值为右上角改变大小 } if(target.className.indexOf('lt')!= -1){ this.draging = this.resizeLt; // 赋值为左上角改变大小 } if(target.className.indexOf('bl') != -1){ this.draging = this.resizeBl; } //alert('this.scrollTop:'+this.scrollTop); //点击时记录拖动层的初始信息 this.controlBoxWidth = my.offsetWidth; //拖动层的宽度 this.controlBoxHeight = my.offsetHeight; //拖动层的宽度 this.controlBoxLeft = my.offsetLeft; //拖动层的LEFT坐标 this.controlBoxTop = my.offsetTop; //拖动层的TOP坐标 // 记录鼠标按下时鼠标相对与拖动层的距离 this.mx = posx - this.controlBoxLeft; this.my = posy - this.controlBoxTop; // 记录左下角的坐标，因为按住右上拖动的时候左下角不动 this.lb_x = my.offsetWidth + my.offsetLeft; this.lb_y = my.offsetHeight + my.offsetTop; console.log('my.offsetHeight:'+my.offsetHeight+'my.offsetTop:'+my.offsetTop); // 记录右下角坐标，按住左上角拖动的时候右下角不动 this.rb_x = my.offsetLeft + my.offsetWidth; this.rb_y = my.offsetTop + my.offsetHeight; // 记录右上角坐标，当按住左下角的时候右上角不动 this.lt_x = my.offsetLeft + my.offsetWidth; this.lt_y = my.offsetTop; break; case 'mousemove': if (this.draging == this.controlBox){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消页面上由于鼠标按下拖动造成的选中文字和图片的选择状态 //拖动层的位置 var left = posx - this.mx; var top = posy - this.my; left < 0 && (left = 0); top < 0 && (top = 0); left > (this.warpWidth - this.controlBoxWidth) && (left = this.warpWidth - this.controlBoxWidth); top > (this.warpHeight - this.controlBoxHeight) && (top = this.warpHeight - this.controlBoxHeight); //改变位置 myStyle.left = left + 'px'; myStyle.top = top + 'px'; //右下角拖动 } else if (this.draging == this.resizeRb) { // 需要改变的宽度 var changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft, changeHeight = posy - this.controlBoxHeight - this.controlBoxTop, // 计算总宽度 allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft , allHeight = this.controlBoxHeight + changeHeight + this.controlBoxTop; //改变宽度 myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; myStyle.height = (this.controlBoxHeight + changeHeight) + 'px'; // 限制最大宽度 if (allWidth > this.warpWidth) { myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; } if (allHeight > this.warpHeight) { myStyle.height = (this.warpHeight - this.controlBoxTop) + 'px'; } // 限制最小宽度 if ( parseInt(myStyle.width) < minWidth)myStyle.width = minWidth + 'px'; if (parseInt(myStyle.height) < minHeight) myStyle.height = minHeight + 'px'; // 右上角 } else if (this.draging == this.resizeTr) { // 需要改变的宽度，该变高度即改变TOP的坐标 changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft; // 计算总宽度 allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft; // 改变宽度 myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; if (allWidth > this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; if ( parseInt(myStyle.width) < minWidth) myStyle.width = minWidth + 'px'; // 改变高度 my.style.top = posy + 'px'; my.style.height = (this.controlBoxHeight + (this.controlBoxTop - posy)) +'px'; if(parseInt(my.style.height)< minHeight){ my.style.height = minHeight +'px'; my.style.top = (this.lb_y - minHeight) + 'px'; } if(parseInt(my.style.height)>this.lb_y){ my.style.height = this.lb_y + 'px'; my.style.top = 0; } // 左上角 }else if (this.draging == this.resizeLt) { changeWidth = this.controlBoxLeft - posx; changeHeight = this.controlBoxTop - posy; my.style.left = posx + 'px'; my.style.width = (this.controlBoxWidth + changeWidth) + 'px'; my.style.top = posy + 'px'; my.style.height = (this.controlBoxHeight + changeHeight) + 'px'; // 限制宽高度最大值 if(parseInt(my.style.width) > this.controlBoxLeft + this.controlBoxWidth){ my.style.width = (this.controlBoxLeft + this.controlBoxWidth) + 'px'; my.style.left = 0; }else if(parseInt(my.style.width)< minWidth){ my.style.left = (this.rb_x - minWidth) + 'px'; my.style.width = minWidth + 'px'; } if(parseInt(my.style.height) > this.controlBoxHeight + this.controlBoxTop){ my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px'; if(parseInt(my.style.top)<0) my.style.top = 0; }else if(parseInt(my.style.height)< minHeight){ my.style.top = (this.rb_y - minHeight) + 'px'; my.style.height = minHeight + 'px'; } // 左下角 }else if(this.draging == this.resizeBl){ changeWidth = this.controlBoxLeft - posx; changeHeight = posy - this.controlBoxHeight - this.controlBoxTop; my.style.left = posx + 'px'; my.style.width = this.controlBoxWidth + changeWidth + 'px'; my.style.height = this.controlBoxHeight + changeHeight + 'px'; if(parseInt(my.style.width)< minWidth){ my.style.width = minWidth + 'px'; my.style.left = this.lt_x - minWidth + 'px'; }else if(parseInt(my.style.width)> this.lt_x){ my.style.width = this.lt_x + 'px'; my.style.left = 0; } if(parseInt(my.style.height)< minHeight){ my.style.height = minHeight + 'px'; }else if(parseInt(my.style.height)> this.warpHeight- this.lt_y){ my.style.height = this.warpHeight- this.lt_y +'px'; } } break; case 'mouseup': this.draging = null; break; } }, bind:function () { var that = this; bindEvent(document, 'mousedown', bindFunction(that,that.moveBox)); bindEvent(document, 'mousemove', bindFunction(that,that.moveBox)); bindEvent(document, 'mouseup', bindFunction(that,that.moveBox)); } }; var demo = new DragBox({ outWarpId:'outwarp' }); })() </script> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的JS拖拽的进一步练习，移动与拉伸实现代码全部内容，希望文章能够帮你解决JS拖拽的进一步练习，移动与拉伸实现代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/368259.html

来源：【匿名】

【上一篇】JavaScript之编码规范推荐【下一篇】javascript 怎么调用php方法

更多 ►

【JS拖拽的进一步练习，移动与拉伸实现代码】教程文章相关的互联网学习教程文章

asp.net中JavaScript数据验证实现代码

今天在做一个数据修改的页面，页面上有一个DropDownList控件，绑定的是实体中的重要属性，我希望用户在修改该控件值的时候，提示用户，他修改了该控件的值。所以为该下拉控件加上了如下语句。复制代码代码如下:DDLmaterial.Attributes.Add("onchange", "alert(‘注意：您修改了物品类型!‘)"); 似乎不错，不仅有提示效果，也不需要刷新页面。可是当我打开页面进行测试的时候就发现了问题，当我把下拉控件的值改回原值的时候，它还...

一个简单的JavaScript数据缓存系统实现代码

代码如下:var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key] ...

一个简单的JavaScript数据缓存系统实现代码_javascript技巧

代码如下: var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key]...

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)【图】

很庆幸，我又见到了末日后新升的太阳，所以我还能在这里写文章，言归正传哈，最近做了一个项目，需要用子域名调用主域名下的一个现有的功能，于是想到了用jsonp来解决，在我们平常的项目中不乏有这种需求的朋友，于是记录下来以便以后查阅同时也希望能帮到大家。什么是JSONP协议? JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用...

JavaScript用JQuery呼叫Server端方法实现代码与参考语法【图】

Insus.NET从2013年开始学习Javascript，此博文是第一次使用JQuery，从Javascript客户端用JQuery呼叫Server端的方法。首先看看此例的演示：准备好Server端的方法：代码如下:[System.Web.Services.WebMethod] public static string VeryUserName(string name) { string rtn = "恭喜，此帐号还没有注册，你可以使用。"; if (name == "") rtn = "请填写一个注册帐号。"; if (name == "Insus.NET") rtn = "此用户已经注册，请使用另...

vue+vue-validator 表单验证功能的实现代码

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能，具体代码如下所示： 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="[required]"...

JQuery里选择超链接的实现代码

语法规则如下： $('a[href$="ABC"]')... 支持的选择方式如下： = 判断完全相符； != 不相符； ^=以某字符串开头； $=以某字符串结尾； *=包含某字符串。进一步，可以通过$('a[href$="ABC"]:first')返回结果集中的第一条记录如果需要遍历结果集：代码如下:$(a[href*=/Lists/Booking/DispForm.aspx]).each(function(){ // $(this)… }); 如果要获取相关属性可以通过$(a[href$="ABC"]:first).attr(‘title)等来获取如果需要返回...

cookie的复制与使用记住用户名实现代码

代码如下:<!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"> <head> <title></title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($....

微信小程序封装自定义弹窗的实现代码【图】

最近在做小程序的登录，需要同时获取用户手机号和头像昵称等信息，但是小程序又不支持单个接口同时获取两种数据，因此想到自定义一个弹窗，通过弹窗按钮触发获取手机号事件。记录一下。具体代码如下：业务代码中：在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"><view class=dialog-body slot="dialog-body"><view class=dialog-content>申请获取你微信绑...

使用jQuery操作Cookies的实现代码_jquery

当你浏览某网站时，你硬盘上会生产一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。从本质上讲，它可以看作是你的身份证。使用传统的Javascript来设置和获取Cookies信息很麻烦，要写上几个函数来处理，幸运的是jQuery帮我们做了很...

jQuery 淡入淡出、展开收缩菜单实现代码【图】

效果图:运行以后，刷新下即可。jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;} $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 ...

JS判断元素是否在数组内的实现代码

一、JQuery 如果是用JQuery的话，可以用inArray()函数： jquery inarray()函数详解 jquery.inarray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 determine the index of the first parameter in the array (-1 if not found). 返回值 jquery 参数 value (any) : 用于在数组中查找是否存在 array (array) : 待处理数组。用法为：代码如下: $.inArray(value, array) 二、自己写函数 function contains(ar...

jQuery获取浏览器中的分辨率实现代码

代码如下:<script type="text/javascript"> $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽...

Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码

在调试功能模块时候，发现怎么用什么方法都无法在infowindow里面添加的div进行绑定事件处理。郁闷啊！上网搜了好多方法也没用，后来想想还是查了一下官方的API，发现了google.maps.InfoWindow下面的Events里面有个domready事件官方解释： This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dyna...

使用jQuery操作Cookies的实现代码

首页 / JAVASCRIPT / JS拖拽的进一步练习，移动与拉伸实现代码

JS拖拽的进一步练习，移动与拉伸实现代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS拖拽的进一步练习，移动与拉伸实现代码】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程