In the process of learning to practice, I think it needs to have the following steps:
First, have a clear objective, to analyze the process of implementation has its own level of knowledge there are problems that may arise, and then list the order to be solved the problem, then find the answers in accordance with the problem, the problems are solved can be slightly out of a test version, of course, finally able to do the work to optimize the code even performance optimization.
Here is what I wrote palette buttons with javaScript whole process:
First of all I need to do is a palette button: four color buttons one rgba on behalf of the four parameters.
Issues to think about is: 1, drag the mouse events dom element 2, how to control dom element to that level can only drag 3, how to convert and drag elements to change the color and transparency values
The final problem solving:
1, the need to use the mouse to drag and drop dom element onmousedown, onmousemove, onmouseup mouse events (By the way: the difference between onmousedown and mousedown onmousedown is js is native, and the package is a jQuery method mousedown onmousedown method)
2 , so that the child can move the control element is fixed in the sub-elements parent element only in the horizontal movement
3, the weight can be converted into the corresponding color values and transparency values of preemption by dragging the entire progress bar (see details code comments)
One hour hand knock out code and renderings
codes:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-family:"微软雅黑";}
#parent1,#parent2,#parent3,#parent4{ position:relative; width:520px; height:50px; background:#ccc; margin-bottom:20px; }
#div1,#div2,#div3,#div4{ position:absolute; width:20px; height:50px; background:#99e;}
#div5{position:absolute; width:300px; height:300px;background:#000;}
label{margin-left: 525px;}
</style>
</head>
<body>
<div id="parent1">
<div id="div1"></div>
<label id="div1_info">R:0</label>
</div>
<div id="parent2">
<div id="div2"></div>
<label id="div2_info">G:0</label>
</div>
<div id="parent3">
<div id="div3"></div>
<label id="div3_info">B:0</label>
</div>
<div id="parent4">
<div id="div4"></div>
<label id="div4_info">opacity:1(default)</label>
</div>
<div id="div5"></div>
<script>
window.onload=function(ev){
var oEvent = ev||event; //兼容ie火狐事件对象
var oDiv1 = document.getElementById("div1");
var oParent1 = document.getElementById("parent1");
var oDiv2 = document.getElementById("div2");
var oParent2 = document.getElementById("parent2");
var oDiv3 = document.getElementById("div3");
var oParent3 = document.getElementById("parent3");
var oDiv4 = document.getElementById("div4");
var oParent4 = document.getElementById("parent4");
var oDiv5 = document.getElementById("div5");
//rgb对应的三个值
var R = G = B = 0;
//初始化鼠标点击位置,鼠标移动多少对应dom元素就对应移动多少
var disX=0;
var disY=0;
oDiv1.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv1.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv1.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent1.offsetWidth-oDiv1.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent1.offsetWidth-oDiv1.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent1.offsetHeight-oDiv1.offsetHeight){
t=oParent1.offsetHeight-oDiv1.offsetHeight;
}
//css对div定位
oDiv1.style.left=l+'px';
oDiv1.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv1.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
R = parseInt(percent*255);
//alert(R);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div1_info").innerHTML="R:"+R;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv2.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv2.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv2.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent2.offsetWidth-oDiv2.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent2.offsetWidth-oDiv2.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent2.offsetHeight-oDiv2.offsetHeight){
t=oParent2.offsetHeight-oDiv2.offsetHeight;
}
//css对div定位
oDiv2.style.left=l+'px';
oDiv2.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv2.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
G = parseInt(percent*255);
//alert(G);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div2_info").innerHTML="G:"+G;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv3.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv3.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv3.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent3.offsetWidth-oDiv3.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent3.offsetWidth-oDiv3.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent3.offsetHeight-oDiv3.offsetHeight){
t=oParent3.offsetHeight-oDiv3.offsetHeight;
}
//css对div定位
oDiv3.style.left=l+'px';
oDiv3.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv3.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
B = parseInt(percent*255);
//alert(B);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div3_info").innerHTML="B:"+B;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv4.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv4.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv4.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent4.offsetWidth-oDiv4.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent4.offsetWidth-oDiv4.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent4.offsetHeight-oDiv4.offsetHeight){
t=oParent4.offsetHeight-oDiv4.offsetHeight;
}
//css对div定位
oDiv4.style.left=l+'px';
oDiv4.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv4.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
oDiv5.style.opacity = percent;
//oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div4_info").innerHTML="A:"+percent;
}
return false; //解决低版本火狐拖拽空div时的bug
}
}
</script>
</body>
</html>
Below are renderings:
R & lt / G / B / A rgba represent the four parameters, where the default value of the transparency of a main function is completed
The bottom is the effect of the display of the div
Originally intended to be written out in detail the steps, but I think this is not difficult, and time consuming, so miserably. js code can reuse a large part, nor do optimization. This being the first, there is time to amend
This article is reproduced in: ape 2048➥ https://www.mk2048.com/blog/blog.php?id=hh0k1h011ab