Jquery实现拖动Div

代码如下：

@model Ranwei.Web.OMS.Areas.Project.Models.ProjectTask.ProjectTaskModel

@{
    this.Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "任务";
    bool IsAdd = Ranwei.Service.OMS.Authority.Authority.HasRole("/Project/ProjectTask/Create");
    bool IsEdit = Ranwei.Service.OMS.Authority.Authority.HasRole("/Project/ProjectTask/Edit");
    bool IsDetail = Ranwei.Service.OMS.Authority.Authority.HasRole("/Project/ProjectTask/Detail");
    bool IsDelete = Ranwei.Service.OMS.Authority.Authority.HasRole("/Project/ProjectTask/Delete");

}

@section HeadSection {

}
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .layui-border-blue {
        color: #1e9fff;
        border-color: #1e9fff;
    }

    p {
        margin: 3px 0px;
    }

    .bor {
        border: 2px solid #ecf0f5;
        margin: 0px 5px;
        padding: 10px;
    }

    .btncolor {
        color: #169bd5;
    }

    .left {
        width: 320px;
        height: 95vh;
    }

    .rigth {
        height: 93vh;
    }

    .flex {
        display: flex;
    }

    .jus {
        justify-content: space-between;
        margin: 6px 0px;
    }

    .divt {
        width: 280px;
        height: 80vh;
        margin: 0px 5px;
        border: 2px solid #ecf0f5;
    }

    .divState {
        background-color: #ecf0f5;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        text-align: center;
    }
    /**不重要灰色、次要绿色、主要黄色、严重红色。**/

    .priority {
        border-top: 2px solid #ecf0f5;
        border-bottom: 2px solid #ecf0f5;
        border-right: 2px solid #ecf0f5;
        padding: 3px 3px;
        margin: 8px 7px;
    }

    .gray {
        border-left: 5px solid gray;
    }

    .green {
        border-left: 5px solid seagreen;
    }

    .yellow {
        border-left: 5px solid orange;
    }

    .red {
        border-left: 5px solid red;
    }
</style>
<link href="~/Plugins/select2/css/select2.min.css" rel="stylesheet" />
<link href="~/Css/layui-select2.css" rel="stylesheet" />
<div class="larry-row larry-col-lg12 larry-col-md12 larry-col-sm12 larry-col-xs12 list-page">
    <div class="layui-tab-content larryms-panel-body" style="width: 2300px;">
        <section class="larry-card ranwei-list-content" id="app2">
            <div class="flex" style="width: 2250px;margin-top: 10px;">
                <div class="bor left">
                    <div class="flex jus">
                        <div class="">
                            <h3>我的项目</h3>
                        </div>
                        <div class=" btncolor">
                            <div class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" data-title="添加项目" data-url="/Project/ProjectProject/Create" style="display: inline-block;" onclick="DataAdd(this)">添加</div>
                        </div>
                    </div>
                    <div v-for="(item,index) in MyProject" :key="index">
                        @*状态是1 循环这个*@
                        <div class="flex jus">
                            <div class="" v-on:click="getData(item.ProjectId,item.Name)">{{item.Name}}</div>
                            <div class="btncolor">
                                <div v-on:click="showPanel[index]=!showPanel[index]">
                                    {{showPanel[index]?'隐藏∧':'展开∨'}}
                                </div>
                            </div>
                        </div>
                        <div class="panel" v-if="showPanel[index]">
                            <div class="flex jus">
                                <div class="">类型：{{item.Type}}</div>
                                <div class="">负责人：{{item.UserinfoName}}</div>
                            </div>
                            <div class="flex jus">
                                <div class="">
                                    成员：
                                    <span v-for="(it,i) in item.TeamList" :key="i">
                                        <span v-if="i==0">{{it.UserName}}</span>
                                        <span v-else>、{{it.UserName}}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="flex" style=" justify-content: space-around;">
                                <div class="">
                                    <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" :data-id="item.ProjectId" data-title="编辑项目" data-url="/Project/ProjectProject/Edit?id=" onclick="DataEdit(this)" style="display: inline-block;">编辑</button>
                                </div>
                                <div class="">
                                    <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" :data-id="item.ProjectId" onclick="StatusEdit(this)" style="display: inline-block;">归档</button>
                                </div>
                                <div class="">
                                    <div class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" :data-id="item.ProjectId" style="display: inline-block;" onclick="DeleteData(this)">删除</div>
                                </div>
                            </div>
                        </div>
                        <hr />
                    </div>
                    @*状态是2 循环这个*@
                    <div style="margin-top: 10px;">
                        <h3>归档项目</h3>
                        <div class="flex jus" v-for="(item,index) in Archive" :key="index">
                            <div class="">{{item.Name}}</div>
                            <div class=" btncolor">操作</div>
                            <hr />
                        </div>
                    </div>

                </div>
                <div class="bor">
                    <div>{{PName}}</div>
                    <div class="larry-form-item">
                        <div class="larry-inline">
                            <div class="larry-input-block">
                                @Html.DropDownList("Status", Model.StatusList, new {@class = "larry-select",style="border-color: #E4EAEC;",lay_ignore=""})
                            </div>
                        </div>
                        <div class="larry-inline">
                            <div class="larry-input-block">
                                <input type="text" name="Title" id="Title" autocomplete="off" class="larry-input" placeholder="任务标题" />
                            </div>
                        </div>
                        <div class="larry-inline">
                            <div class="larry-input-block">
                                @Html.DropDownList("UserinfoId", Model.UserinfoList, new {@class = "larry-select",style="border-color: #E4EAEC;",lay_ignore=""})
                            </div>
                        </div>
                        <div class="larry-inline">
                            <button class="larry-btn larry-order-btn larry-btn-sm" v-on:click="DataSerach()"><i class="larry-icon larry-suosou"></i>查询</button>
                        </div>
                        <div class="larry-inline">
                            <div class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" :data-title="'添加任务-'+PName" :data-id="PId" data-url="/Project/ProjectTask/Create?id=" style="display: inline-block;" onclick="DataAddRw(this)">添加任务</div>
                        </div>
                    </div>
                    <div class="flex" style="position: relative;">
                        <div class="divt" v-if="activeI==1 || activeI==0">
                            <div class="divState">待处理</div>
                            <div class="priority" :id="'st1'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels1" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="divt" v-if="activeI==2 || activeI==0">
                            <div class="divState">待定</div>
                            <div class="priority" :id="'st2'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels2" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="divt" v-if="activeI==3 || activeI==0">
                            <div class="divState">进行中</div>
                            <div class="priority " :id="'st3'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels3" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="divt" v-if="activeI==4 || activeI==0">
                            <div class="divState">待验收</div>
                            <div class="priority " :id="'st4'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels4" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="divt" v-if="activeI==5 || activeI==0">
                            <div class="divState">已完成</div>
                            <div class="priority " :id="'st5'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels5" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="divt" v-if="activeI==6 || activeI==0">
                            <div class="divState">已拒绝</div>
                            <div class="priority " :id="'st6'+item.Id" :class="{'green':item.Level==1,'yellow':item.Level==2,'gray':item.Level==3,'red':item.Level==4}" v-for="(item,index) in obj.taskModels6" :key="index">
                                <div v-on:click="getTake(item.Id)">
                                    <p>{{item.Title}}</p>
                                    <p style="font-size: 12px; color: #aaaaaa;"><i class="larry-icon larry-shijian"></i>{{item.Time}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/vue.global.js"></script>
<script src="~/Plugins/select2/js/select2.full.js"></script>
<script src="~/Plugins/select2/js/i18n/zh-CN.js"></script>
<script src="~/Scripts/blockDrag.min.js"></script>

@section FootSection {

<script type="text/javascript">
       var app;
       var $,
           larryms,
           larryTab,
           table,
           tableId = 'TableList',
           tableList;

       layui.use(['jquery', 'forms', 'table', 'laytpl', 'laydate', 'element',"form"], function () {

           // 加载页面所需要的Layer组建
           $ = layui.$;
           larryTab = layui.larryTab;
           larryms = layui.larryms;
           table = layui.table;

           var laytpl = layui.laytpl,
               forms = layui.forms,
               laydate = layui.laydate;

            app = Vue.createApp({
               data: function () {
                   return {
                       blag:1,
                       detail: {},
                       MyProject:[],
                       Archive:[],
                       obj:{},
                       activeI:0,//显示哪一列
                       showPanel:[],
                       PId:0,//当前项目id
                       PName:"",//当前项目名称
                       flag : false,//设置了一个标志 false为点击事件 ture为鼠标移动事件
                       firstTime : 0, //开始时间
                       lastTime :0,//结束时间
                   }
               },
               created() {
                   var loading = larryms.load(2);
                   var that = this;
                   $.get("/Project/ProjectTask/GetList", {}, function (res) {
                       larryms.close(loading);
                       that.detail = res
                       that.MyProject=res.MyProject
                       that.Archive= res.ArchiveProject
                       that.PId=res.MyProject.length==0?-1:res.MyProject[0].ProjectId
                       that.PName=res.MyProject.length==0?"":res.MyProject[0].Name
                       $.get("/Project/ProjectTask/GetTask", {
                           id:that.PId
                       }, function (res) {
                           that.obj=res
                       })
                   })

               },
               mounted(){
                   var that = this;
                   document.getElementById('Status').addEventListener('change',(e)=>{
                      this.activeI= document.getElementById('Status').value
                   })
                   setTimeout(()=>{
                    var arr=[0,0,0,0,0,0]
                    $('.priority').each(function(index, domEle) {
                         var idname=domEle.getAttribute('id')
                         var col=idname.substring(2, 3)
                         //获得当前是第几列
                       if(col==1)
                       {
                         arr[col-1]++;
                        }
                       if(col==2)
                        {
                         arr[col-1]++;
                        }
                       if(col==3)
                        {
                         arr[col-1]++;
                        }
                       if(col==4)
                        {
                          arr[col-1]++;
                        }
                       if(col==5)
                        {
                          arr[col-1]++;
                        }
                       if(col==6)
                       {
                          arr[col-1]++;
                       }

                    //初始化对象
                    var demo = new blockDrag({
                        dragNode: "#" + idname, //拖拽结点，传ID
                        blockW: 295, //拖拽结点的宽度，单位为像素 302px 295 272
                        blockH: 60, //拖拽结点的高度，单位为像素
                        block: "(6,6)", //栅格的排数和列数(排数,列数)
                        startPos: "(" + arr[col-1] + ","+col+")", //拖拽结点的起始位置，例如(3,5)为第三排第五列,默认为(1,1)
                    });
                   })
                   },1500)
               },
               methods: {
                   //获取数据
                   getData(ProjectId,Name){
                        var that=this
                        that.PId=ProjectId
                        that.PName=Name
                       $.get("/Project/ProjectTask/GetTask", {
                           id:that.PId
                       }, function (res) {
                           that.obj=res
                   })
                   },
                   DataSerach(){
                       var that=this
                       var Status=$('#Status').val()
                       var UserinfoId=$('#UserinfoId').val()
                       var Title=$('#Title').val()
                       $.get("/Project/ProjectTask/SearchTask", {
                           id:that.PId,
                           status:Status,
                           userinfoid:UserinfoId,
                           title:Title,
                       }, function (res) {
                           that.obj=res
                   })
                   },
                   getTake(Id){
                   DataEdit(Id)
                   }

               }
               }).mount('#app2')

       });

       //添加数据，方式二：弹窗
       function DataAdd(obj) {
           var editIndex = larryms.open({
              title: $(obj).data('title'),
               content: $(obj).data('url'),
               type: 2,
               skin: 'larryms-navy',
                area: ['75%', '90%'],
               shadeClose: true,
               shade: 0.2,
               offset: '20px',
               maxmin: true,
               btnAlign: 'c',
               success: function (index, layero) { }
           });
       }

       //添加任务，方式二：弹窗
       function DataAddRw(obj) {
           var editIndex = larryms.open({
              title: obj.getAttribute('data-title'),
               content: $(obj).data('url')+ obj.getAttribute('data-id'),
               type: 2,
               skin: 'larryms-navy',
               area: ['75%', '90%'],
               shadeClose: true,
               shade: 0.2,
               offset: '20px',
               maxmin: true,
               btnAlign: 'c',
               success: function (index, layero) { }
           });
       }

           // 编辑数据，方式二：弹窗
       function DataEdit(id) {
           if(app.flag){
               var  url="/Project/ProjectTask/Edit?id="+ id;
               var editIndex = larryms.open({
               title:"编辑任务",
               content:url ,
               type: 2,
               skin: 'larryms-navy',
               area: ['75%', '90%'],
               shadeClose: true,
               shade: 0.2,
               offset: '20px',
               maxmin: true,
               btnAlign: 'c',
               success: function (index, layero) { flag=false }
           });
           }
       }

           // 归档
       function StatusEdit(obj) {
           var id = $(obj).data('id');
           larryms.confirm('你确定要执行归档吗？', {
               icon: 3,
               title: '归档提示！'
           }, function () {
               var delLoading = larryms.load(2);
               $.ajax({
                  url: "/Project/ProjectProject/StatusEdit",
                   type: "Post",
                   dataType: "json",
                   data: { Id: id },
                   complete: function () { larryms.close(delLoading); },
                   success: function (res) {
                       if (res.Code == 0) {
                          // location.reload(); // 或者选择下面的DataSerach()刷新列表，二选一
                           larryms.msg("归档成功", { time: 1000 }, function () {
                              location.reload(); // 刷新列表，或者选择上面的location.reload()重载页面，二选一
                           });
                       } else {
                           larryms.msg(res.Message);
                       }
                   }
               });
           });
       }


       // 删除
       function DeleteData(obj) {
           var id = $(obj).data('id');
           larryms.confirm('你确定要执行删除吗？', {
               icon: 3,
               title: '删除提示！'
           }, function () {
               var delLoading = larryms.load(2);
               $.ajax({
                  url: "/Project/ProjectProject/Delete",
                   type: "Post",
                   dataType: "json",
                   data: { Id: id },
                   complete: function () { larryms.close(delLoading); },
                   success: function (res) {
                       if (res.Code == 0) {
                          // location.reload(); // 或者选择下面的DataSerach()刷新列表，二选一
                           larryms.msg("删除成功", { time: 1000 }, function () {
                             location.reload(); // 刷新列表，或者选择上面的location.reload()重载页面，二选一
                           });
                       } else {
                           larryms.msg(res.Message);
                       }
                   }
               });
           });
       }
</script>
}

拖动代码块核心JS blockDrag.min.js

function blockDrag(b) {
    this.set = {
        // boxNode: "#box",
        dragNode: "#drag",
        blockW: 150,
        blockH: 100,
        block: "(5,5)",
        startPos: "(1,1)"
    };
    jQuery.extend(this.set, b);
    this.startX = this.set.startPos.substring(3, 4);
    this.startY = this.set.startPos.substring(1, 2);
    this.row = this.set.block.substring(1, 2);
    this.col = this.set.block.substring(3, 4);
    if (this.startY > this.row || this.startX > this.col) {
        this.startX = 1;
        this.startY = 1
    }
    this.dragId = this.set.dragNode.substring(1, this.set.dragNode.length);
    this.wrapId = this.dragId + "Wrap";
    this.wrapNode = "#" + this.wrapId;
    var a = this;
    //获得当前是第几列
    this.dragcolname = this.set.dragNode.substring(3, 4); //会得到 1 2 3 4 5 6
    console.log(this.dragcolname)
    this.tid = this.set.dragNode.substring(4, this.set.dragNode.length);  //任务id
    $(this.set.dragNode).wrap("<div id='" + this.wrapId + "'></div>");
    $(this.wrapNode).css({
        width: (this.set.blockW - 23) + "px",
        height: this.set.blockH + "px",
        position: "absolute",
        top: ((this.startY - 1) * this.set.blockH + 30) + "px",
        left: ((this.startX - 1) * this.set.blockW + 7) + "px"
    });
    //$(this.set.boxNode).css({
    //    width: this.col * this.set.blockW + "px",
    //    height: this.row * this.set.blockH + "px"
    //});
    $(this.wrapNode).mousedown(function (e) {
        app.firstTime = new Date().getTime();
        var c = parseInt($(this).css("left"));
        var d = parseInt($(this).css("top"));
        var f = e.pageX;
        var g = e.pageY;
        e.stopPropagation();
        a.moveFn = function (h) {
            var i = h.pageX;
            var j = h.pageY;
            $(a.wrapNode).css({
                left: (c + i - f) + "px",
                top: (d + j - g) + "px"
            })
        };
        $(document).on("mousemove", a.moveFn);
        if ($(a.wrapNode).get(0).setCapture) {
            $(a.wrapNode).get(0).setCapture()
        }
        $(document).mouseup(function (j) {
            app.lastTime = new Date().getTime();
            if ((app.lastTime - app.firstTime) < 200) {
                app.flag = true;
            }
            var l = parseInt($(a.wrapNode).css("left")); //位置
            var m = parseInt($(a.wrapNode).css("top")); //位置
            var i = (a.set.blockW + 7) / 2;//宽度
            var h = (a.set.blockH + 30) / 2;//高度
            var k = parseInt(l / i);//相除得到格子数
            var n = parseInt(m / h);//相除得到格子数
            console.log("l:" + l)
            console.log("m:" + m)
            console.log("i:" + i)
            console.log("h:" + h)
            console.log("k:" + k)
            console.log("n:" + n)
            k < 0 ? k = 0 : null;
            n < 0 ? n = 0 : null;
            k > (a.col - 1) * 2 ? k = (a.col - 1) * 2 : null;
            n > (a.row - 1) * 2 ? n = (a.row - 1) * 2 : null;
            if (k % 2 == 0) {
                if (((k + 2) / 2) == a.dragcolname) {
                    console.log("第一")
                    //如果他们当前列 那么不动
                    $(a.wrapNode).animate({
                        left: ((a.startX - 1) * a.set.blockW + 7) + "px"
                    }, 50)
                    $(a.wrapNode).animate({
                        top: ((a.startY - 1) * a.set.blockH + 30) + "px"
                    }, 50)
                }
                else {
                    $.get("/Project/ProjectTask/GitStatus", { id: a.tid, status: ((k + 2) / 2) }, function () {
                        $.get("/Project/ProjectTask/GetTask", {
                            id: app.PId
                        }, function (res) {
                            //重新加载
                            var col = ((k + 2) / 2)
                            a.dragcolname = col //更新
                            //获得当前是第几列
                            var number = 0;
                            if (col == 1) {
                                number = res.taskModels1.length
                            }
                            if (col == 2) {
                                number = res.taskModels2.length
                            }
                            if (col == 3) {
                                number = res.taskModels3.length
                            }
                            if (col == 4) {
                                number = res.taskModels4.length
                            }
                            if (col == 5) {
                                number = res.taskModels5.length
                            }
                            if (col == 6) {
                                number = res.taskModels6.length
                            }
                            $(a.wrapNode).animate({
                                left: (col-1) * a.set.blockW + 7 + "px"
                            }, 50)
                            $(a.wrapNode).animate({
                                top: (number-1) * a.set.blockH + 30 + "px"
                            }, 50)
                        })
                    })

                }
            } else {
                if (((k + 3) / 2) == a.dragcolname) {
                    console.log("第二")
                    //如果他们当前列 那么不动
                    $(a.wrapNode).animate({
                        left: ((a.startX - 1) * a.set.blockW + 7) + "px"
                    }, 50)
                    $(a.wrapNode).animate({
                        top: ((a.startY - 1) * a.set.blockH + 30) + "px"
                    }, 50)
                }
                else {
                    $.get("/Project/ProjectTask/GitStatus", { id: a.tid, status: ((k + 3) / 2) }, function (res) {
                        $.get("/Project/ProjectTask/GetTask", {
                            id: app.PId
                        }, function (res) {
                            //重新加载
                            var col = ((k + 3) / 2)
                            a.dragcolname = col //更新
                            //获得当前是第几列
                            var number = 0;
                            if (col == 1) {
                                number = res.taskModels1.length
                            }
                            if (col == 2) {
                                number = res.taskModels2.length
                            }
                            if (col == 3) {
                                number = res.taskModels3.length
                            }
                            if (col == 4) {
                                number = res.taskModels4.length
                            }
                            if (col == 5) {
                                number = res.taskModels5.length
                            }
                            if (col == 6) {
                                number = res.taskModels6.length
                            }
                            $(a.wrapNode).animate({
                                left: (col - 1) * a.set.blockW + 7 + "px"
                            }, 50)
                            $(a.wrapNode).animate({
                                top: (number - 1) * a.set.blockH + 30 + "px"
                            }, 50)
                        })
                    })

                }
            }


            $(document).off("mousemove").off("mouseup");
            $(a.wrapNode).off("mouseup")
        })
    });
    console.log($(a.wrapNode).get(0))
    if ($(a.wrapNode).get(0).releaseCapture) {
        $(a.wrapNode).get(0).releaseCapture()
    }
    return false
};

效果图：