可拖拽組件slider.js使用方法詳解
更新時間：2020年12月04日 14:39:42 作者：貳樾
這篇文章主要為大家詳細(xì)介紹了可拖拽組件slider.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
基于 mithril.js ,javascript ,scss寫一個可拖動的滑塊組件，供大家參考，具體內(nèi)容如下
問題描述：
需求需要實現(xiàn)一個可拖動的滑塊組件，但是又不能用UI框架，只好自己動手寫一個了。 廢話不多說，直接上代碼。
技術(shù)要求：
需要有mithril.js，javascript，scss技術(shù)基礎(chǔ)。
js及頁面代碼。
var m = require("mithril");
require('./slider.scss');
import slider from './slider';
let obj = {
colorWidth: 0, // 已拖拽長度
clickOpen: false, // 是否開啟拖拽
sliderDom: '', // 綁定的灰條dom
colorDom: '', // 綁定的有色條dom
radiusDom: '', // 綁定的圓點dom
moveEmentRect: null, // 獲取灰條dom參數(shù)
Percentage: 0, // 百分比
minWidth: 0, // 拖動區(qū)間下限
maxWidth: 0, // 拖動區(qū)間上限
sliderCallback: null, // 參數(shù)回調(diào)
node: [0, 25, 50, 75, 100], // 節(jié)點數(shù)及占比
// 初始化數(shù)據(jù)
initslider:function(){
obj.sliderDom = document.getElementsByClassName('slider-body')[0]; // 允許進(jìn)行開始拖拽的元素
obj.colorDom = document.getElementsByClassName('slider-section')[0]; // 允許進(jìn)行開始拖拽的元素
obj.radiusDom = document.getElementsByClassName('slider-radius-body')[0]; // 允許進(jìn)行開始拖拽的元素
obj.moveEmentRect = obj.sliderDom.getBoundingClientRect(); // 獲取拖拽父元素的寬度
obj.maxWidth = obj.moveEmentRect.width;
},
// 處理寬度值域
handleWidth:function(EV){
if (EV <= obj.minWidth) {
return obj.minWidth;
} else if (EV >= obj.maxWidth) {
return obj.maxWidth;
} else {
return EV;
}
},
// 鼠標(biāo)點擊 拖動開始
getMousedown:function(e){
if (e.target === obj.sliderDom || e.target === obj.colorDom || e.target === obj.radiusDom) { // 判斷是否是可點擊拖拽的元素
obj.clickOpen = true; // 打開拖拽狀態(tài)
let Width = e.clientX - obj.moveEmentRect.left; // 計算拖拽距離
obj.colorWidth = this.handleWidth(Width); // 處理拖拽距離轉(zhuǎn)化為長度
console.log(obj.colorWidth, '拖動開始')
this.sliderCallback && this.sliderCallback({
colorWidth : this.getPercentage(), // 將數(shù)據(jù)回傳頁面
})
}
},
// 拖動中
getMoveWidth:function(e){
if (obj.clickOpen) {
let moveX = e.clientX - obj.moveEmentRect.left;
obj.colorWidth = this.handleWidth(moveX);
console.log(obj.colorWidth, '拖動中')
this.sliderCallback && this.sliderCallback({
colorWidth : this.getPercentage(), // 將數(shù)據(jù)回傳頁面
})
}
},
// 鼠標(biāo)松開 拖動結(jié)束
getmouseUp:function(){
obj.clickOpen = false;
console.log('拖動結(jié)束')
},
// 綁定到body上，實現(xiàn)在組件外面可以拖拽
getBodyMouse: function(){
let body = document.querySelector('body');
body.onmousemove = function(e){
obj.getMoveWidth(e); // 在body上拖拽組件
};
body.onmouseup = function(e){
obj.getmouseUp(e); // 在body上拖拽結(jié)束時關(guān)閉可拖拽狀態(tài)
obj.onmouseout(); // 在body上結(jié)束拖拽時隱藏百分比
}
},
// 計算拖動的百分比
getPercentage: function () {
let _P = (Number(obj.colorWidth) / Number(obj.maxWidth)).toFixed(2);
this.Percentage = Math.floor((Number(_P || 0) * 100));
return Number(_P);
},
// 鼠標(biāo)移入顯示百分比
onmouseover:function(){
let _S = document.getElementsByClassName('slider-percentage')[0];
_S.style.display = 'block';
},
// 鼠標(biāo)移除隱藏百分比
onmouseout:function(){
let _S = document.getElementsByClassName('slider-percentage')[0];
_S.style.display = 'none';
},
// 清除數(shù)據(jù)
closemode: function () {
obj.colorWidth = 0; // 已拖拽長度
obj.clickOpen = false; // 是否開啟拖拽
obj.sliderDom = ''; // 綁定的灰條dom
obj.colorDom = ''; // 綁定的有色條dom
obj.radiusDom = ''; // 綁定的圓點dom
obj.moveEmentRect = null; // 獲取灰條dom參數(shù)
obj.Percentage = 0; // 百分比
obj.minWidth = 0;
obj.maxWidth = 0;
obj.sliderCallback = null; // 參數(shù)回調(diào)
},
// 百分比選擇
getNodePer:function () {
return obj.node.map((item) => {
return m('div',{class:'slider-node', style: `left: ${item}%`, onclick: function(){
obj.getNodeData(item);
}},[
])
})
},
getNodeData:function(item){
obj.colorWidth = Number(obj.maxWidth) * (item / 100);
this.sliderCallback && this.sliderCallback({
colorWidth : this.getPercentage(), // 將數(shù)據(jù)回傳頁面
});
},
}
export default {
oninit: function (vnode) {
},
oncreate: function (vnode) {
obj.sliderCallback = vnode.attrs.cb;
obj.initslider();
obj.onmouseout();
obj.getBodyMouse();
},
view: function (vnode) {
return m('div', {class: 'slider'}, [
m('div',{class:"slider-body",onmousedown:function(e){
obj.getMousedown(e);
},onmousemove:function(e){
obj.getMoveWidth(e);
},onmouseup:function(e){
obj.getmouseUp(e);
}},[
m('div',{class:"slider-section", style:`width: ${obj.colorWidth}px`},[
m('div',{class:"slider-radius",onmouseover:function(){
obj.onmouseover();
},onmouseout:function(){
obj.onmouseout();
}},[
m('div',{class:"slider-radius-body"},[])
]),
m('div',{class:"slider-percentage" , style: `left: ${obj.colorWidth - 25}px`},[
obj.Percentage + '%'
]),
]),
obj.getNodePer(),
]),
])
},
onremove: function (vnode) {
obj.closemode();
},
}
scss樣式代碼。
// 用的是scss預(yù)處理樣式
// $arrowsSize scss變量
// var(--primary-lighten)用的是全局顏色，可以直接用顏色值代替
// $dark #ligth 為黑夜白天樣式，可以不用。
$arrowsSize: 6px; // 三角形 大小
.slider{
width: 100%;
.slider-body{
width: 100%;
height: 6px;
margin: 16px 0;
border-radius: 5px;
position: relative;
cursor: pointer;
.slider-section{
height: 6px;
background-color: var(--primary-lighten);
// width: 30%;
position: absolute;
left: 0;
border-radius: 5px;
.slider-radius{
height: 16px;
width: 16px;
position: absolute;
left: 100%;
z-index: 999;
top: -5px;
transform: translateX(-50%);
background-color: transparent;
text-align: center;
user-select: none;
line-height: normal;
.slider-radius-body{
width: 16px;
height: 16px;
border: 2px solid var(--primary-lighten);
background-color: var(--fontwhite-base);
border-radius: 50%;
transition: .2s;
user-select: none;
&::after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
}
.slider-percentage{
// display: none;
height: 25px;
width: 50px;
line-height: 25px;
border-radius: 5px;
background-color: var(--mode-darken);
text-align: center;
font-size: 14px;
color: var(--font-darken);
position: absolute;
top: -40px;
// left: 100%;
&::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
position: absolute;
border-top: solid $arrowsSize;
border-left: solid $arrowsSize transparent !important;
border-right: solid $arrowsSize transparent !important;
border-bottom: solid $arrowsSize transparent !important;
top: 25px;
left: 35%;
color: var(--mode-darken);
}
}
}
.slider-node{
position: absolute;
height: 8px;
width: 8px;
border-radius: 100%;
background-color: var(--fontwhite-base);
border: 2px solid var(--primary-lighten);
transform: translateX(-50%);
top: -1px;
}
}
}
#dark .slider-body{
background-color: var(--line-darken3);
}
#light .slider-body{
background-color: var(--line-lighten3);
}
調(diào)用
getSlider: function () {
return m(slider, {
cb : function(arg){
console.log(arg,22222)
},
});
},
obj.getSlider(),
說明一下
因為公司項目涉及保密條例，電腦都加了安全限制，無法錄制視頻或者gif圖片，所有只能截圖展示了。
效果
可以點擊圓點拖動，也可以直接點擊灰條進(jìn)行點選然后拖動，也可以點擊灰條上的百分比圓點進(jìn)行拖動，因為單獨又把事件綁定到了body上，所以可以在灰條上拖動開始并且在組件外也可以進(jìn)行拖動，類似Element UI的slider組件效果。
拖動參數(shù)的打印
只為分享寫代碼過程中的一些心得體會，感謝平臺！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中頁面的重新加載(當(dāng)前頁面/上級頁面)及frame或iframe元素引用介紹
用JavaScript刷新上級頁面和當(dāng)前頁面在某些情況下還是比較實用的，感興趣的朋友可以了解下另外介紹一下frame或iframe元素的引用方法，希望本文對你有所幫助2013-01-01
javascript的offset、client、scroll使用方法詳解
javascript的offset、client、scroll在使用過程中非常頻繁，接下來將對此進(jìn)行一一介紹，需要了解的朋友可以詳細(xì)參考下2012-12-12
JS動態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行解決
這篇文章主要給大家介紹了關(guān)于JS動態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-12-12
下面小編就為大家?guī)硪黄猨s從外部獲取圖片的實現(xiàn)方法。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS+CSS實現(xiàn)的拖動分頁效果,可實現(xiàn)鼠標(biāo)拖動頁面翻轉(zhuǎn)到上一頁或下一頁的功能,涉及javascript操作頁面元素與css樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
js中如何復(fù)制一個對象并獲取其所有屬性和屬性對應(yīng)的值
如果知道這個對象的所有屬性自然就可以重新new一個，然后對每個屬性賦值，就可以做到，但如果不知道呢？如何創(chuàng)建一個內(nèi)容相同 的對象呢？下面有個不錯的示例，大家可以看看2013-10-10
這篇文章主要介紹了Bootstrap模態(tài)框案例解析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
ionic js 復(fù)選框 與普通的 HTML 復(fù)選框到底有沒區(qū)別
本文通過實例給大家演示ionic js 復(fù)選框 與普通的 HTML 復(fù)選框到底有沒區(qū)別的相關(guān)知識，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
bootstrap switch開關(guān)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap switch開關(guān)組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08