网上搜的资料,源码如下:
* {
margin: 0;
padding: 0
}
.box {
position: absolute;
top: 100px;
left: 100px;
}
/*四边*/
.box .t,
.box .b,
.box .l,
.box .r {
position: absolute;
z-index: 1;
background:#666;
}
.box .l,
.box .r {
width: 10px;
height: 100%;
cursor: col-resize;
}
.box .t,
.box .b {
width: 100%;
height: 10px;
cursor: row-resize;
}
.box .t {
top: 0;
}
.box .b {
bottom: 0;
}
.box .l {
left: 0;
}
.box .r {
right: 0;
}
/*四角*/
.box .tl,
.box .bl,
.box .br,
.box .tr {
width: 20px;
height: 20px;
position: absolute;
background: #CCC;
z-index: 2;
cursor: nwse-resize
}
.box .tl,
.box .bl {
left: -5px;
}
.box .tr,
.box .br {
right: -5px;
}
.box .br,
.box .bl {
bottom: -5px;
}
.box .tl,
.box .tr {
top: -5px;
}
.box .tr,
.box .bl {
cursor: nesw-resize;
}
/*图片*/
img {
width: 100%;
height: 100%;
}
window.onload = function () {
var oDiv = document.getElementsByTagName('div')[0];
oDiv.style.width = '500px';
var aSpan = oDiv.getElementsByTagName('span');
for (var i = 0; i < aSpan.length; i++) {
dragFn(aSpan[i]);
}
function dragFn(obj) {
obj.onmousedown = function (ev) {
var oEv = ev || event;
var oldWidth = oDiv.offsetWidth;
var oldHeight = oDiv.offsetHeight;
var oldX = oEv.clientX;
var oldY = oEv.clientY;
var oldLeft = oDiv.offsetLeft;
var oldTop = oDiv.offsetTop;
document.onmousemove = function (ev) {
var oEv = ev || event;
if (obj.className == 'tl') {
oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
}
else if (obj.className == 'bl') {
oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
}
else if (obj.className == 'tr') {
oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
oDiv.style.height = oldHeight - (oEv.clientY - oldY)+'px';
oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
}
else if (obj.className == 'br') {
oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';
oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
}
else if (obj.className == 't') {
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
}
else if (obj.className == 'b') {
oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';
oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
}
else if (obj.className == 'l') {
oDiv.style.height = oldHeight + 'px';
oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
}
else if (obj.className == 'r') {
oDiv.style.height = oldHeight + 'px';
oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
}
};
document.onmouseup = function () {
document.onmousemove = null;
};
return false;
};
}
};
原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
原生js实现模块来回拖拽效果
代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...
vuejs2.0运用原生js实现简单的拖拽元素功能
纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
Ant Design -- 图片可拖拽效果,图片跟随鼠标移动
Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...
js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
重置svn地址
TortoiseSVN->relocate 更改svn地址
JS获取页面元素并修改
//实现代码如下,非常简单
iOS小技巧 - 和屏幕等宽的Table分割线
前言 因为本人也是学习iOS才一个多月,在写程序的过程中经常会遇到一些看似应该很简单,但是要解决好却要知道一点小trick的问题. 因此后面会陆续记一些这类问题,一来加深印象,二来也可以做个备忘录. ...
HornetQ
https://github.com/flsusp/http-queue https://github.com/sfr-network-service-platforms/hq-console htt ...
ubuntu下安装opencv库+Python2.7环境安装及开发摄像头拍照应用
好久没有更新了,今天更一篇最近遇到的问题,及解决办法,后面博客得继续写起来 安装 #使用Python下的lib库直接进行安装 apt-get install python-opencv 测试 #使用如 ...
Fabric动态增加组织【资料】
Fabric在启动之前需要生成Orderer的创世区块和channel的配置区块.也就是说在Fabric网络启动之前我们就必须定好了有哪些Org,而当Fabric已经跑起来之后,想要增加Org却是很麻 ...
ACM/ICPC 2018亚洲区预选赛北京赛站网络赛D-80 Days--------树状数组
题意就是说1-N个城市为一个环,最开始你手里有C块钱,问从1->N这些城市中,选择任意一个,然后按照顺序绕环一圈,进入每个城市会有a[i]元钱,出来每个城市会有b[i]个城市,问是否能保证经过每 ...
Intellj IDEA光标问题
Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标, ...
【BZOJ3105】新Nim游戏(线性基)
[BZOJ3105]新Nim游戏(线性基) 题面 BZOJ Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以 ...
数据库——MySQL——索引——索引原理及B+树
索引原理 我们使用索引,就是为了提高查询的效率,如同查书一样,先找到章,再找到章中对于的小节,再找到具体的页码,再到我们需要的内容. 事实上索引的本质就是不断缩小获取数据的筛选范围,找出我们想要的结果 ...