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

直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢?
在此记录一下代码:

简单拖拽扩展

*{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;}

按此处拖动

中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间
内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容
中间内容中间内容中间内容中间内容中间内容中间内容

(function () {
//定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent
function $() {
var elements = new Array();
for (var i = 0; i (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) this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px';
if ( parseInt(myStyle.width) 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) this.controlBoxHeight + this.controlBoxTop){
my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px';
if(parseInt(my.style.top) this.lt_x){
my.style.width = this.lt_x + 'px';
my.style.left = 0;
}
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'
});
})()

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js实现拉伸拖动iframe的具体代码

    左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)缺点:CSDN页面放开鼠标后才改大小,不占CPU资源. 这个是实时改大小,所以速度太慢,希望有人来改改.我是不想弄了,反正又没用什么特别的技术.提示:拖动的秘密就在filter:alpha(opacity=0)这一句 复制代码 代码如下: <html><script language="javas

  • 使用JavaScript解决网页图片拉伸问题(推荐)

    问题描述 这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案.自己先做了一个简单的demo来展示问题. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

  • JS实现横向拉伸动感伸缩菜单效果代码

    本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习JavaScript前端设计的也可以作为参考范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

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

    直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢? 在此记录一下代码: 简单拖拽扩展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200p

  • 基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • 简单实现js拖拽效果

    本文实例为大家分享了js拖拽效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%;

  • JS拖拽插件实现步骤

    这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理 二.根据原理实现的最基本效果 三.代码抽象与优化 四.扩展:有效的拖拽元素 五.性能优化和总结 六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:o

  • 完美实现js拖拽效果 return false用法详解

    本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下 1.return false可以用来阻止默认事件即系统默认事件.例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu). 2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行.而为了兼容取事件方法为:var oEvent=ev||event; 3.在

  • js拖拽一些常见的思路方法整理

    js拖拽的常见思路 1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽,拖拽中和拖拽结束时的事件(). 如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend. 2.鼠标按下即发生onmousedown事件时:获取鼠标位置,获取被拖动元素的位置,记录两者之间的纵横坐标的差值().对document元素绑定onmousemove,onmouseup事件. 刚开始接触js拖拽时,我当时疑惑的是为什么是对docume

  • JS拖拽排序插件Sortable.js用法实例分析

    本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js,再然后就有了这篇文章. 特点: 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持单个列表容器内部拖拽排序,也支持两个列表容器互相拖拽排序 支持拖放操作和可选择的文本 非常友善的滚动

  • 原生js拖拽功能制作滑动条实例代码

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><!--滑动条--> <div class=&qu

  • Fabric.js 拖拽平移画布方法示例

    目录 正文 原理解析 按下鼠标时 移动鼠标时 松开鼠标时 代码仓库 正文 使用 fabric.js 创建出来的画布默认是不能拖拽移动的. 不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理. 本文就粗略分析一下这个原理. 原理解析 鼠标拖拽的原理其实很简单,主要就3步: 鼠标点击元素 移动鼠标 松开鼠标 在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置. 当松开鼠标时,也要获取松手那刻鼠标所在位置

  • Sortable.js拖拽排序使用方法解析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

随机推荐