您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下js实现表格拖动选项的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
具体内容如下
题目要求如下图所示，具体思路：拖动改变选择项，用的的事件是js的拖动相关事件。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
cursor: pointer;
}
.specWrap{
width: 800px;
margin: 0 auto;
user-select: none;
}
.specification{
border: 1px solid #ccc;
width: 100%;
position: relative;
}
.sp-top{
height: 60px;
line-height: 60px;
text-align: center;
box-sizing: border-box;
}
.sp-top ul{
overflow: hidden;
}
.sp-top ul li{
width: 33%;
float: left
}
.sp-top ul li:nth-of-type(2){
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.sp-cen{
text-align: left;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-indent: 20px;
overflow: hidden;
}
.screen{
width: 33%;
float: left;
}
.screen:nth-of-type(2){
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.sp-btm{
text-align: left;
box-sizing: border-box;
text-indent: 20px;
overflow: hidden;
}
.resolution{
width: 33%;
float: left;
}
.resolution:nth-of-type(2){
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.btn{
float: right;
width: 60px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="specWrap">
<div class="specification">
<div class="sp-top">
<ul>
<li>SPECIFICATIONS功能</li>
<li>LEVELS规格</li>
<li>SELECTED选择</li>
</ul>
</div>
<div class="sp-cen">
<div class="screen">
<p>Screen size屏幕大小</p>
</div>
<div class="screen">
<ul class="size">
<li>4</li>
<li>4.5</li>
<li>5</li>
<li>5.5</li>
<li>6</li>
<li>6.5</li>
</ul>
</div>
<div class="screen sc"></div>
</div>
<div class="sp-btm">
<div class="resolution">
<p>Screen resolution屏幕分辨率</p>
</div>
<div class="resolution">
<ul class="resolu">
<li>High definition (720p)</li>
<li>Full HD (1080p)</li>
<li>Quad HD (2K) 四倍高清（2K）</li>
<li>Ultra HD (4K) 超高清（4K）</li>
</ul>
</div>
<div class="resolution re"></div>
</div>
</div>
<div>
<button class="btn">提交</button>
</div>
</div>
</body>
<script>
var size=document.getElementsByClassName('size')[0].children; //size列表
var resolu=document.getElementsByClassName('resolu')[0].children; //分辨率列表
var specWrap=document.getElementsByClassName('specWrap')[0];
for(let i=0;i<size.length;i++){ //size选择
size[i].function (e) { //按下事件
for(var i=0;i<size.length;i++){
size[i].style.position='';
size[i].style.background='';
}
var e=e||event;
var lf=e.offsetX;
var tp=e.offsetY;
var current=this;
current.style.position='absolute';
document.function(e){ //移动事件
var e=e||event;
var x=e.clientX-specWrap.offsetLeft-lf;
var y=e.clientY-specWrap.offsetTop-tp;
current.style.left=x+'px';
current.style.top=y+'px';
}
document.function(){ //鼠标释放事件
document.null;
document.getElementsByClassName('sc')[0].innerHTML=current.innerHTML;
current.style.position='';
}
}
}
for(let i=0;i<resolu.length;i++){ //resolution选择，可以进行代码封装，在这我就不封装了
resolu[i].function (e) {
for(var i=0;i<resolu.length;i++){
resolu[i].style.position='';
resolu[i].style.background='';
}
var e=e||event;
var lf=e.offsetX;
var tp=e.offsetY;
var current=this;
current.style.position='absolute';
current.style.zIndex=6;
document.function(e){
var e=e||event;
var x=e.clientX-specWrap.offsetLeft-lf;
var y=e.clientY-specWrap.offsetTop-tp;
current.style.left=x+'px';
current.style.top=y+'px';
}
document.function(){
document.null;
document.getElementsByClassName('re')[0].innerHTML=current.innerHTML;
current.style.position='';
}
}
}
</script>
</html>以上是“js实现表格拖动选项的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。