jquery的拖拽-CSDN博客

本文链接：https://blog.csdn.net/qq_45757927/article/details/134778102

这里总结一下jquery的拖拽，分为侧边栏选项的拖拽和侧边栏整体的拖拽，下边写了一个小demo，另外包含了页面右键选项

实现代码：

下面引入的cdn解决侧边栏拖动

<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

下面引入的cdn解决鼠标右键选项事件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css" rel="stylesheet">

代码：

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <div class="main">
        <div class="left">
            <div class="dragarea">拖拽区域</div>
            <ul class="ul1">
                <li draggable="true">选项一</li>
                <li draggable="true">选项二</li>
                <li draggable="true">选项三</li>
                <li draggable="true">选项四</li>
            </ul>
        </div>
        <div class="box">
            <ul class="ul1">
            </ul>
        </div>
    </div>
    <script>
    var sign=''
    // 拖拽开始
    $(document).on('dragstart','.left .ul1 li',function (e){
        console.log("拖拽开始")
        sign=$(e.target)
    })
    // 允许向box拖放
    $(document).on('dragover', '.box', function (e){   
        e.preventDefault();         //阻止浏览器默认动作
        console.log("允许向box拖放")
    });
    // 向box拖放
    $(document).on('drop','.box',function (e){
        e.stopPropagation();        //阻止事件冒泡
        $(".box .ul1").append(sign)
        console.log('向box释放完成')
    })
    // 侧边栏右键菜单弹出对话框
    $(function() {
        $.contextMenu({
            selector: '.left',        //只能在指定元素内右键
            items: {
                "add": {name: "添加", icon: "add",callback:function(){
                    // 执行函数
                    console.log("您点击了添加按钮")
                }},
                "delete": {name: "删除", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "退出", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });
    });
    // 侧边栏拖拽开始
    $(".left").draggable({
        disabled: false,//如果该值设置为true，拖动特效将被禁用。默认值为false
        cursor: 'move',//指定在做拖拽动作时，鼠标的CSS样式
        opacity: .85,//当拖动时，拖动助手元素的不透明度
        handle: '.dragarea',//只能在指定元素内拖动
        drag: function (event, ui) {
            $(this).css({ "height": "90%", "width": "180px","border":"none" })
        },//当鼠标在拖动过程中移动时触发。
        start: function (event, ui) { },//当拖动开始时触发。
        stop: function (event, ui) {
            if (window.innerWidth < $(this).offset().left + 245) {        //处理吸附页面右边栏
                $(this).css({ "height": "100%", "width": "200px", "opacity": "1", "top": "0", "right": "0", "left": "auto","border-left":"1px solid #999" })
            } else if ($(this).offset().left - 13 < 0) {        //处理吸附页面左边栏
                $(this).css({ "height": "100%", "width": "200px", "opacity": "1", "top": "0", "left": "0","border-right":"1px solid #999", })
            } else {        //处理悬浮在页面上
                $(this).css({ "height": "90%", "width": "180px","opacity": ".85","border":"none" });
            }
        }//当拖动停止时触发。
    });
    </script>


</body>

参考：jQuery.draggable 参数详解