javscript实现元素拖动

最新推荐文章于 2025-05-22 18:36:53 发布

原创最新推荐文章于 2025-05-22 18:36:53 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

drag

1 篇文章

订阅专栏

本文详细介绍了如何通过拖放操作调整网页上列表项的位置，实现动态布局优化。

    <ul id="list1">
        <li>
            <div drag="normal">
                1</div>
        </li>
        <li>
            <div drag="normal">
                2</div>
        </li>
        <li>
            <div drag="normal">
                3</div>
        </li>
        <li>
            <div drag="normal">
                4</div>
        </li>
        <li>
            <div drag="normal">
                5</div>
        </li>
        <li>
            <div drag="normal">
                6</div>
        </li>
        <li>
            <div drag="normal">
                7</div>
        </li>
        <li>
            <div drag="normal">
                8</div>
        </li>
        <li>
            <div drag="normal">
                9</div>
        </li>
    </ul>

<style type="text/css">
        body
        {
            padding-top: 20px;
        }
        ul
        {
            margin: 0px;
            padding: 0px;
            margin-left: 20px;
        }
        #list1
        {
            width: 350px;
            list-style-type: none;
            margin: 0px;
        }
        #list1 li
        {
            float: left;
            padding: 5px;
            width: 90px;
            height: 90px;
        }
        #list1 div
        {
            width: 90px;
            height: 90px;
            border: solid 1px black;
            background-color: #E0E0E0;
            text-align: center;
            z-index: 1;
        }
        
        #list1 li .temp
        {
            width: 90px;
            height: 90px;
            border: dashed 1px black;
            background-color: #E0E0E0;
            text-align: center; /*z-index: 0;*/
        }
        
        div.moving
        {
            position: absolute;
            cursor: move;
            z-index: 2;
            opacity: 0.7; /***在Firefox, Safari, Chrome和Opera下的CSS透明度***/
            filter: alpha(opacity=70); /***IE***/
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("div[drag='normal']").mousedown(function (e) {
                var ev = window.event || e;
                var originX = $(this).offset().left;
                var oringnY = $(this).offset().top;
                var relativeX = ev.clientX - originX;
                var relativeY = ev.clientY - oringnY;
                var $currentDiv = $(this); //当前待移动的div
                var $currentLi = $currentDiv.parent(); //存放当前待移动div的容器li
                var $tempDiv = $("<div></div>").addClass("temp").hide();
                $tempDiv.appendTo("body");

                var $targetLi = null;
                $currentDiv.removeAttr("drag");

                $(document).mousemove(function (e) {
                    var ev = window.event || e;
                    var currentX = ev.clientX - relativeX;
                    var currentY = ev.clientY - relativeY;

                    $tempDiv.show().appendTo($currentLi); //添加占位符div
                    $currentDiv.addClass("moving").css({ "left": currentX, "top": currentY });

                    //移动过程中的临时交换
                    var centerX = currentX + $currentDiv.width() / 2;
                    var centerY = currentY + $currentDiv.height() / 2; //移动过程中div中点的坐标

                    $("div[drag='normal']").each(function (index, item) {
                        var left1 = $(item).offset().left;
                        var left2 = left1 + $(item).width();
                        var top1 = $(item).offset().top;
                        var top2 = top1 + $(item).height(); //每个div四条边线的坐标值
                        if (centerX > left1 && centerX < left2 && centerY > top1 && centerY < top2) {
                            $targetLi = $(item).parent(); //目标容器li
                            $currentLi.children(".temp").remove().appendTo($targetLi);
                            $(item).appendTo($currentLi);
                            $currentLi = $targetLi;
                            isSorted = true;
                        }

                    })

                    //防止拖动中选中
                    if (document.selection) {//IE ,Opera
                        if (document.selection.empty)
                            document.selection.empty(); //IE
                        else //Opera
                            document.selection = null;
                    }
                    else if (window.getSelection)//FF,Safari
                    {
                        window.getSelection().removeAllRanges();
                    }
                });

                $(document).mouseup(function (e) {
                    $(document).unbind("mousemove");
                    var x = $tempDiv.offset().left;
                    var y = $tempDiv.offset().top;

                    $currentDiv.attr("drag", "normal").animate({ left: x, top: y }, 200,
                    function () {
                        $tempDiv.remove();
                        $currentDiv.removeAttr("style").removeClass("moving").appendTo($targetLi == null ? $currentLi : $targetLi);
                    })

                    $(document).unbind("mouseup");
                })
            })
        })
    </script>