JQ简单实现拖拽功能示例

dom元素结构

<ul id="draggable-element" style="list-style: none;padding: 0;margin: 0;">

        <li datatype="text" style="width: 100px; height: 100px; background-color: #3498db; cursor: grab;">box1</li>

        <li datatype="text" style="width: 100px; height: 100px; background-color: blue; cursor: grab;">box2</li>

    </ul>

<ul id="droppable-element" style="list-style: none;padding: 0;margin: 0;width: 200px; height: 200px; background-color: #e74c3c; position: absolute; top: 150px; left: 150px;"></ul>

需要引用的js文件

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

初始化拖拽元素、拖拽目标元素、拖拽目标元素排序

<script>

        $(document).ready(function() {

            // 初始化排序功能

            $('#droppable-element').mouseenter(function() {

                $($(this)).sortable({ disabled: false, revert: true });

            });

            $('#droppable-element').mouseleave(function() {

                $($(this)).sortable('destroy');

            });

            // 选择要拖拽的元素

            var $draggable = $("#draggable-element > li");


            // 初始化拖拽功能

            $draggable.draggable({

                cursor: "move",

                connectToSortable: "#droppable-element",

                helper: "clone",

                revert: "invalid"

            });


            // 选择拖拽目标元素

            var $droppable = $("#droppable-element");


            // 初始化放置功能

            $droppable.droppable({

                drop: function(event, ui) {

                    // 在这里可以处理拖拽成功后的操作

                    // ui.helper 包含了被拖拽的元素

                    // 你可以将ui.helper的副本添加到目标元素中

                    console.log(ui.helper.attr('dataType'), 123);

                    let element = new String();

                    if (ui.helper.attr('dataType') === 'text') {

                        element = `<div>${ui.helper[0].innerText}</div>`

                    };

                    $droppable.append(element);

                }

            });

        });

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容