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 {
}
我的项目
添加
@*状态是1 循环这个*@
{{item.Name}}
{{showPanel[index]?'隐藏∧':'展开∨'}}
类型：{{item.Type}}
负责人：{{item.UserinfoName}}
成员：
{{it.UserName}}
、{{it.UserName}}
删除
@*状态是2 循环这个*@
归档项目
{{item.Name}}
操作
{{PName}}
@Html.DropDownList("Status", Model.StatusList, new {@class = "larry-select",style="border-color: #E4EAEC;",lay_ignore=""})
@Html.DropDownList("UserinfoId", Model.UserinfoList, new {@class = "larry-select",style="border-color: #E4EAEC;",lay_ignore=""})
添加任务
待处理
{{item.Title}}
{{item.Time}}
待定
{{item.Title}}
{{item.Time}}
进行中
{{item.Title}}
{{item.Time}}
待验收
{{item.Title}}
{{item.Time}}
已完成
{{item.Title}}
{{item.Time}}
已拒绝
{{item.Title}}
{{item.Time}}
@section FootSection {
}拖动代码块核心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("");
$(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
};效果图：