1. draggable()
滑动条demo：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style type="text/css"> ???????.con{ ???????????width:300px; ???????????height:300px; ???????????border:1px solid #000; ???????????margin:50px auto 0; ???????} ???????.box{ ???????????width:50px; ???????????height:50px; ???????????background-color:hotpink; ???????????cursor:pointer; ???????} ???</style> ???<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> ???<script type="text/javascript" src="js/jquery-ui.min.js"></script> ???<script type="text/javascript"> ???????$(function () { ???????????//使得box可以鼠标拖动 ???????????$(‘.box‘).draggable({ ???????????????//约束元素在父级内拖动 ???????????????containment:‘parent‘, ???????????????//约束元素只能横向拖动 ???????????????axis:‘x‘, ???????????????//元素拖动时透明度变为0.6 ???????????????opacity:0.6, ???????????????//ui里面有什么可以用console.log（ui）查看 ???????????????drag:function (ev,ui) { ???????????????????var nowleft = ui.position.left; ???????????????} ???????????}); ???????}) ???</script></head><body> ???<div class="con"> ???????<div class="box"></div> ???</div></body></html>JS——jquery UI
原文地址：https://www.cnblogs.com/gaoquanquan/p/9226534.html