js implements table drag options
|
This article example shares the specific code of js to implement the table drag option for your reference. The specific content is as follows The requirements of the topic are shown in the figure below. The specific idea is: drag to change the selection item, and the event used is the js drag-related event.
Code:
<!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 Specifications</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) Quad HD (2K)</li>
<li>Ultra HD (4K)</li>
</ul>
</div>
<div class="resolution re"></div>
</div>
</div>
<div>
<button class="btn">Submit</button>
</div>
</div>
</body>
<script>
var size = document.getElementsByClassName('size')[0].children; //size list var resolu = document.getElementsByClassName('resolu')[0].children; //resolution list var specWrap = document.getElementsByClassName('specWrap')[0];
for(let i=0;i<size.length;i++){ //size selects size[i].function (e) { //press event 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){ //mobile event 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(){ //Mouse release event document.null;
document.getElementsByClassName('sc')[0].innerHTML=current.innerHTML;
current.style.position='';
}
}
}
for(let i=0;i<resolu.length;i++){ //resolution selection, you can encapsulate the code, I will not encapsulate it here 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>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to enhance Linux and Unix server security
>>: Analyze the selection problem of storing time and date types in MySQL
Recommend
Correct use of Vue function anti-shake and throttling
Preface 1. Debounce: After a high-frequency event...
MySQL semi-synchronous replication principle configuration and introduction detailed explanation
Environment Introduction: Ubuntu Server 16.04.2+M...
How to expand the disk partition for centos system
Problem/failure/scenario/requirement The hard dis...
MySQL permission control detailed explanation
Table of contents mysql permission control Permis...
CSS to achieve zoom in and out close button (example code)
This effect is most common on our browser page. L...
How to set the border of a web page table
<br />Previously, we learned how to set cell...
Vuex implements simple shopping cart function
This article example shares the specific code of ...
Ubuntu installation Matlab2020b detailed tutorial and resources
Table of contents 1. Resource files 2. Installati...
Perfect solution for JavaScript front-end timeout asynchronous operation
Table of contents What happens if a piece of code...
How to install MySQL 8.0.17 and configure remote access
1. Preparation before installation Check the data...
Detailed explanation of the error when using Element-ui NavMenu submenu to generate recursively
When the submenu of the navigation bar is generat...
How to solve the error of PyCurl under Linux
Solution to "Could not run curl-config"...
Understanding MySQL Locking Based on Update SQL Statements
Preface MySQL database lock is an important means...
Installation process of zabbix-agent on Kylin V10
1. Download the installation package Download add...
In-depth understanding of the seven communication methods of Vue components
Table of contents 1. props/$emit Introduction Cod...