html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒

封装为了jq插件，如下

drag.

;(function ($) {

$.fn.dragDiv = function (options) {

var def = {

maxW:600,// 可伸缩的最大宽度

minW:50// 可伸缩的最小宽度

};// 参数默认值

var opts = $.extend(def,options);// 扩展参数，使用默认值或传参

//设置最大/最小宽度

var max_width = opts.maxW,

min_width = opts.minW;

//记录鼠标相对left盒子x轴位置

var mouse_x = 0;

var left = $(this).parent('div')[0];

//鼠标移动事件

function mouseMove(e) {

var e = e || window.event;

var left_width = e.clientX - mouse_x;// 可伸缩div的宽度

left_width = left_width < min_width ? min_width : left_width;

left_width = left_width > max_width ? max_width : left_width;

left.style.width = left_width + "px";

}

//终止事件

function mouseUp() {

document.onmousemove = null;

document.onmouseup = null;

}

$(this).mousedown(function (e) {

var e = e || window.event;

//阻止默认事件

e.preventDefault();

mouse_x = e.clientX - left.offsetWidth;// 可伸缩div距离左侧边界的宽度

document.onmousemove = function () {

mouseMove()

};

document.onmouseup = function () {

mouseUp()

};

})

}

})(

/p>

以上所述是小编给大家介绍的开发者网站的支持！

html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者相关推荐

js实现可拖拽的div
实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
hammer.js移动端拖拽缩放旋转元素
第一步下载hammer.js并引入下载地址可以是:http://hammerjs.github.io/ 第二步复制下面这些代码,放在你的js里面 function drag(drag){var ...
鼠标拖拽调整div大小
鼠标拖拽调整div大小实现思路根据鼠标位置改变鼠标样式当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
一个可变布局列表，有9种布局item大小，每个item可拖拽切换位置
代码地址如下: http://www.demodashi.com/demo/11271.html 一.准备工作准备一台安卓设备手机,4.4以上版本本例子实现,一个可变布局列表,有9种布局item大 ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...

html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者

html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者相关推荐

最新文章

热门文章