jquery 拖动子分类实现修改父类

最新推荐文章于 2022-11-11 00:20:32 发布

tang05709

最新推荐文章于 2022-11-11 00:20:32 发布

阅读量182

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/tang05709/article/details/102391389

版权

js 专栏收录该内容

109 篇文章 0 订阅

订阅专栏

在做分类时，有一、二级分类，需要拖动二级分类到另一个一级分类，实现修改父类

一级

<ul class="clearfix level level_1 pid_0 tree-dropable" data-id="<?= $val['id'] ?>">

二级

<ul class="clearfix level <?= $nextLevel ?> pid_<?= $val['p_id'] ?> tree-dragable" data-id="<?= $v['id'] ?>" data-url="<?= Url::to(['category/move-group', 'id' => $v['id']) ?>" draggable="true">

要拖动的元素，如div需要加上

draggable="true"

实现拖动

    $('.tree-dragable').on('dragstart', '',function(event) {
        var id = event.currentTarget.dataset.id;
        var url = event.currentTarget.dataset.url;
        event.originalEvent.dataTransfer.setData("drag_id", id);
        event.originalEvent.dataTransfer.setData("drag_url", url);
    })
    $('.tree-dropable').on('dragover', '',function(event) {
        event.preventDefault();
    })
    $('.tree-dropable').on('drop', '',function(event) {
        var id = event.currentTarget.dataset.id;
        var dragId =event.originalEvent.dataTransfer.getData("drag_id");
        var dragUrl =event.originalEvent.dataTransfer.getData("drag_url");
        var postUrl = baseBackend + dragUrl;
        $.ajax({
            type: "POST",
            url: postUrl,
            dataType: 'json',
            data: "_csrf-backend=" + $('meta[name=csrf-token]') + "&pid=" + id,
            success: function(msg){
               if(msg.error == 0) {
                   window.location.reload();
               }
            }
        });
    })