简单的纯 Javascript 拖动控制器滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14095880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple pure Javascript drag controller slider
提问by Stone Pentecost
Hi Developers all over the world.
嗨，世界各地的开发人员。
I would like to have some help with a simple, pure Javascript (30 lines), JQuery free (and other library's)drag control slider.
我想对一个简单的纯 Javascript （30 行）、JQuery 免费（和其他库的）拖动控制滑块提供一些帮助。
I have been searching months and found many scripts but i don't like -Jquery cause most script need 4, 5, 6 javascript includes.. I prefer smaller and basic script.. i like to ajust them like i want and i also can lean alot from smaller scripts.
我一直在搜索几个月，发现了很多脚本，但我不喜欢 -Jquery 因为大多数脚本需要 4、5、6 个 javascript 包括..我更喜欢更小的和基本的脚本..我喜欢按照我想要的方式调整它们，我也可以从较小的脚本中精益求精。
All i need is a simple slider that i can use for: rescale images, scroll page, change brightness on images (with PHP)etc.
我只需要一个简单的滑块，我可以使用它：重新缩放图像、滚动页面、更改图像的亮度（使用 PHP）等。
I am new with javascript (2 months), this is how far i get now.. Sorry for the bad variable names...
我是 javascript 新手（2 个月），这就是我现在得到的程度.. 对不起，变量名不好......
<script type="text/javascript">
_item = null;
mouse_x = 0;
drag_x = 0;
function move_init() {
document.onmousemove = _move;
document.onmouseup = _stop;
}
function _stop(){
_item = null;
}
function _move(e){
mouse_x = document.all ? window.event.clientX : e.pageX;
if(_item != null){
_item.style.left = (mouse_x - drag_x) + "px";
}
}
function _move_item(drag)
{
_item = drag;
drag_x = mouse_x - _item.offsetLeft;
}
move_init();
drag.onmousedown=_move_item(); // Agh.. did'nt figure out how this works
</script>
<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>
<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>
i appriciate your help.
我感谢你的帮助。
I wrote this on 31 december 2012.. So happy new year. Please be good for each other.
我在 2012 年 12 月 31 日写了这篇文章。新年快乐。请善待彼此。
Thank you.
谢谢你。
回答by Taufik Nurrohman
This code works in modern browsers. Just create some polyfill for that addEventListenerand this custom range slider will be safe to use:
此代码适用于现代浏览器。只需addEventListener为此创建一些 polyfill，这个自定义范围滑块就可以安全使用：
function rangeSlider(id, onDrag) {
var range = document.getElementById(id),
dragger = range.children[0],
draggerWidth = 10, // width of your dragger
down = false,
rangeWidth, rangeLeft;
dragger.style.width = draggerWidth + 'px';
dragger.style.left = -draggerWidth + 'px';
dragger.style.marginLeft = (draggerWidth / 2) + 'px';
range.addEventListener("mousedown", function(e) {
rangeWidth = this.offsetWidth;
rangeLeft = this.offsetLeft;
down = true;
updateDragger(e);
return false;
});
document.addEventListener("mousemove", function(e) {
updateDragger(e);
});
document.addEventListener("mouseup", function() {
down = false;
});
function updateDragger(e) {
if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
}
}
}
Example Usage
示例用法
<style>
.range-slider {
width:300px;
height:20px;
margin:0 auto 1em;
position:relative;
cursor:e-resize;
}
.range-slider:before {
content:"";
display:block;
position:absolute;
top:9px;
left:0;
width:100%;
height:2px;
background-color:black;
}
.range-slider span {
display:block;
height:inherit;
position:relative;
z-index:2;
background-color:red;
cursor:inherit;
}
</style>
<div class="range-slider" id="range-slider-1">
<span></span>
</div>
<script>
rangeSlider('range-slider-1', function(value) {
document.getElementById('test-area').innerHTML = value + '%';
});
</script>
Demo:http://jsbin.com/dulifezi/2/edit
演示：http : //jsbin.com/dulifezi/2/edit
Update
更新
I’m creating a repo for this snippet here → https://github.com/tovic/range-slider
我在这里为这个片段创建了一个 repo → https://github.com/tovic/range-slider
回答by w3bshark
Take a look at DragDealer.js: https://skidding.github.io/dragdealer/
看看 DragDealer.js：https://skidding.github.io/dragdealer/
There's an example of changing opacity of an image based on the value of a slider here.
这里有一个基于滑块值更改图像不透明度的示例。
Hope this helps!
希望这可以帮助！
