js拖动小案例

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #html

姿势分享区专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，演示了如何实现元素的拖动功能以及回收垃圾箱的操作。用户可以拖动小方块到指定区域，当放入回收箱时，方块会消失并显示回收状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 2;
            /* margin-top: 10px; */
            /* margin-left: 10px; */
            /* position: absolute; */
            /* position: relative; */
        }
        .canmove{
            cursor: move;
        }
        #lajiwu{
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            width: 300px;
            text-align: center;
            border: 1px solid transparent;
            z-index: -1;
        }
        .laji_tips{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .isactive{
            background-color: rgba(0,0,0,.1) !important;
            border: 1px solid red;
        }
        #lajilist{
            text-align: left;
            margin-top: 10px;
            padding: 10px;
        }
        #lajilist span{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #ccc;
            margin: 3px;
            vertical-align: bottom;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <p>当前位置: <span id="sitex">x:0</span> <span id="sitey">y:0</span></p>
    <div data-row="1" class="box boxit"></div>
    <span class="boxit">可以移动</span>
    <button id="btn">在创建一个</button>
    <br>
    <div id="lajiwu" class="">
        <h2>回收垃圾</h2>
        <div id="lajilist">
        </div>
        <div class="laji_tips hide">
            <p>是否倒入垃圾箱</p>
        </div>
    </div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var lajiwu = $('#lajiwu');
    var domIndex = 0;
    window.onload = function(){
        $('#btn').on('click',function(){
            let doms = `<div data-row=${domIndex + 1} class="box boxit"></div>`;
            $(this).before(doms);
        })
        $(window).on('mousedown',function(e){
            let curEle = $(e.target);
            let iscanhandle = canhandle(curEle);
            if(iscanhandle){
                bindClick(e,curEle)
            }
        })
        // 获取所有元素编号
        if($('.boxit').length > 0){
            domIndex = $('.boxit').length;
        }
    }

    // 可操作元素激活
    function bindClick(e,ele){
        ele.addClass('canmove')
        Dommove(e,ele);
        $(document).on('mouseup',function(){
            stopListenMove();
        })
        ele.on('mouseup',function(){
            $(this).removeClass('canmove');
            stopListenMove();
            // 扔进垃圾桶
            throwLitter($(this));

        })
    }
    // 判断用户是否要扔进垃圾桶
    function throwLitter(e){
        if(lajiwu.hasClass('isactive')){
            let curRowIndex = ''
            if(e.data('row')){
                curRowIndex = e.data('row')
            }
            let LitterDom = `<span ${curRowIndex?'data-row ="' + curRowIndex + '"':''}>${curRowIndex}</span>`
            $('#lajilist').append(LitterDom);
            e.remove();
            lajiwu.removeClass('isactive');
            lajiwu.find('.laji_tips').addClass('hide');
        }
    }

    // 停止监听document的鼠标移动
    function stopListenMove(){
        $(document).off("mousemove");
    }

    // 控制当前元素移动
    function Dommove(e,ele){
        // 获取当前元素大小
        let eleW = ele[0].offsetWidth;
        let eleH = ele[0].offsetHeight;
        let eleL = ele.offset().left;
        let eleT = ele.offset().top;

        // let curMousesite = ele.offset().left;
        let curMousesiteX = e.clientX;
        let curMousesiteY = e.clientY;
        
        let winClientW = $(window).width();
        let winClientH = $(window).height();
        $(document).on('mousemove',function(e){
            let curX = e.pageX;
            let curY = e.pageY;
            $('#sitex').text('x:' + curX);
            $('#sitey').text('y:' + curY);

            let moveX = curX - (curMousesiteX - eleL);
            let moveY = curY - (curMousesiteY - eleT);
            //  获取鼠标点击的左侧dom

            if(moveX <= 0) moveX = 0;
            if(moveY <= 0) moveY = 0;   // 935
            if(moveX >= winClientW - eleW) moveX = winClientW - eleW;
            if(moveY >= winClientH - eleH) moveY = winClientH - eleH;
            //  垃圾回收
            if(moveX + (eleW / 2) >= lajiwu.offset().left){
                lajiwu.addClass('isactive');
                lajiwu.find('.laji_tips').removeClass('hide');
            }
            else{
                lajiwu.removeClass('isactive');
                lajiwu.find('.laji_tips').addClass('hide');
            } 

            ele.offset({left : moveX,top : moveY})
        })
    }

    // 判断是否是可操作性dom 
    function canhandle(ele){
        if(ele.hasClass('boxit')){
            return true;
        }
        else{
            return false;
        }
    }
</script>

简单的一个拖动小例子，直接复制即可