设置拖拽效果

SpecYue

于 2019-01-25 14:09:00 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/qq_34788903/article/details/86645219

JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何为用户界面添加拖放(Drag and Drop)效果，让元素可以被用户轻松地在屏幕上拖动，提升用户体验。内容包括拖放的实现原理、相关API的使用以及在不同场景下的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.box').draggable({
                // axis:'x',/*限制在x轴拖动*/
                containment:'parent',/*限制在父级的框里拖动*/
                drag:function (ev, ui) {
                    console.log(ui);
                    var num=$('.box').offset().left;
                    document.title=num;
                    $('.box02').val(num);
                }
            });/*这样盒子就能拖动了*/

        })
    </script>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .con{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto 0;
            position: relative;
        }
        .box02{
            height: 200px;
            width: 50px;
            /*background-color: #7aa1ef;*/
            position: absolute;
            left: 820px;
            top: 0;
        }
    </style>
</head>
<body>
<ul>
    <div class="con">
        <div class="box"></div>
        <input type="text" name="" class="box02">
    </div>


</ul>

</body>
</html>