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:

Native js to achieve table loop scrolling
JavaScript drag table row implementation code
The js script that dynamically changes the width of the table by dragging the mouse is compatible with ie/firefox
js to achieve a simple sliding table on the mobile terminal

<<: How to enhance Linux and Unix server security

>>: Analyze the selection problem of storing time and date types in MySQL