github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(colorpicker): 优化游标滑动效果 (#1923)

pull/1942/head
morning-star 2024-05-23 15:26:08 +08:00 committed by GitHub
parent 9daeebf245
commit a1472b3561
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/modules/colorpicker.js
View File

@ -450,9 +450,9 @@ layui.define(['jquery', 'lay'], function(exports){
}; };
//右侧主色选择 //右侧主色选择
slider.on('mousedown', function(e){ slider.on('mousedown', function(e, triggerEvent){
var oldtop = this.offsetTop var oldtop = this.offsetTop;
,oldy = e.clientY; var oldy = e.clientY === undefined ? triggerEvent.clientY : e.clientY;
var move = function(e){ var move = function(e){
var top = oldtop + (e.clientY - oldy) var top = oldtop + (e.clientY - oldy)
,maxh = side[0].offsetHeight; ,maxh = side[0].offsetHeight;
@ -464,12 +464,12 @@ layui.define(['jquery', 'lay'], function(exports){
e.preventDefault(); e.preventDefault();
}; };
layui.stope(e);
createMoveElem(move); createMoveElem(move);
//layui.stope(e);
e.preventDefault(); e.preventDefault();
}); });
side.on('click', function(e){ side.on('mousedown', function(e){
var top = e.clientY - $(this).offset().top + $win.scrollTop(); var top = e.clientY - $(this).offset().top + $win.scrollTop();
if(top < 0)top = 0; if(top < 0)top = 0;
if(top > this.offsetHeight) top = this.offsetHeight; if(top > this.offsetHeight) top = this.offsetHeight;
@ -477,14 +477,15 @@ layui.define(['jquery', 'lay'], function(exports){
_h = h; _h = h;
change(h, _s, _b, _a); change(h, _s, _b, _a);
e.preventDefault(); e.preventDefault();
slider.trigger('mousedown', e);
}); });
//中间小圆点颜色选择 //中间小圆点颜色选择
choose.on('mousedown', function(e){ choose.on('mousedown', function(e, triggerEvent){
var oldtop = this.offsetTop var oldtop = this.offsetTop;
,oldleft = this.offsetLeft var oldleft = this.offsetLeft;
,oldy = e.clientY var oldy = e.clientY === undefined ? triggerEvent.clientY : e.clientY;
,oldx = e.clientX; var oldx = e.clientX === undefined ? triggerEvent.clientX : e.clientX;
var move = function(e){ var move = function(e){
var top = oldtop + (e.clientY - oldy) var top = oldtop + (e.clientY - oldy)
,left = oldleft + (e.clientX - oldx) ,left = oldleft + (e.clientX - oldx)
@ -520,13 +521,13 @@ layui.define(['jquery', 'lay'], function(exports){
change(_h, s, b, _a); change(_h, s, b, _a);
layui.stope(e); layui.stope(e);
e.preventDefault(); e.preventDefault();
choose.trigger(e, 'mousedown'); choose.trigger('mousedown', e);
}); });
//底部透明度选择 //底部透明度选择
alphaslider.on('mousedown', function(e){ alphaslider.on('mousedown', function(e, triggerEvent){
var oldleft = this.offsetLeft var oldleft = this.offsetLeft;
,oldx = e.clientX; var oldx = e.clientX === undefined ? triggerEvent.clientX : e.clientX;
var move = function(e){ var move = function(e){
var left = oldleft + (e.clientX - oldx) var left = oldleft + (e.clientX - oldx)
,maxw = alphacolor[0].offsetWidth; ,maxw = alphacolor[0].offsetWidth;
@ -538,10 +539,11 @@ layui.define(['jquery', 'lay'], function(exports){
e.preventDefault(); e.preventDefault();
}; };
layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
alphacolor.on('click', function(e){ alphacolor.on('mousedown', function(e){
var left = e.clientX - $(this).offset().left var left = e.clientX - $(this).offset().left
if(left < 0)left = 0; if(left < 0)left = 0;
if(left > this.offsetWidth)left = this.offsetWidth; if(left > this.offsetWidth)left = this.offsetWidth;
@ -549,6 +551,7 @@ layui.define(['jquery', 'lay'], function(exports){
_a = a; _a = a;
change(_h, _s, _b, a); change(_h, _s, _b, a);
e.preventDefault(); e.preventDefault();
alphaslider.trigger('mousedown', e);
}); });
//预定义颜色选择 //预定义颜色选择
@ -571,8 +574,8 @@ layui.define(['jquery', 'lay'], function(exports){
if(!lay.touchEventsSupported()) return; if(!lay.touchEventsSupported()) return;
// 触摸事件模拟 // 触摸事件模拟
layui.each([ layui.each([
{elem: side, eventType: 'click'}, {elem: side, eventType: 'mousedown'},
{elem: alphacolor, eventType: 'click'}, {elem: alphacolor, eventType: 'mousedown'},
{elem: basis, eventType: 'mousedown'} {elem: basis, eventType: 'mousedown'}
], function(i, obj){ ], function(i, obj){
lay.touchSwipe(obj.elem, { lay.touchSwipe(obj.elem, {