基于jquery的div拖拽功能
展示效果如图：
可进行拖拽、删除，删除后div会回到上面的待拖拽区域
源码下载地址：点击这里
html代码如下：
<!-- saved from url=(0045)http://www.jq22.com/demo/jquery-tdfz20160803/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqeruy UI 拖拽</title>
<script type="text/javascript" src="./jQuery1.11.3.min.js"></script>
<script type="text/javascript" src="./jquery-ui.js"></script>
<style>
*{
margin:0;
padding:0;
}
table {
border-collapse: collapse;
}
table td {
empty-cells: show
}
#dragBox{
width: 100%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
div[id^="draggable"]{
position: relative;
float: left;
background: peru;
font-size: 14px;
width: 100px;
height: 50px;
line-height: 25px;
color:#fff;
text-align: center;
margin:5px;
padding: 5px;
}
div[id^="draggable"] div,div[id^="draggable"] p{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.button{
width: 80px;
height:30px;
border: 1px solid #999;
border-radius: 8px;
}
:focus{
outline: 0;
}
</style>
</head>
<body>
<button class="button">8*8</button> <button class="button">12*12</button>
<div id="dragBox" style="margin-bottom: 50px;">
<!-- <div id="draggable1" width="110" bgcolor="peru" class="ui-draggable ui-draggable-handle">
<div>Div1</div>
<p>内容内容内容内容内容内容内容内容</p>
</div> -->
<!-- <div id="draggable2" width="110" bgcolor="lightgreen" class="ui-draggable ui-draggable-handle">
<div>Div3</div>
<p>内容内容内容内容内容内容内容内容</p>
</div>
<div id="draggable3" width="110" bgcolor="salmon" class="ui-draggable ui-draggable-handle">
<div>Div2</div>
<p>内容内容内容内容内容内容内容内容</p>
</div> -->
</div>
<table border="1" id="tableBox">
</table>
<script type="text/javascript" language="javascript">
//在页面加载完之后加载jquery
$().ready(function(e) {
(function init(){
getData(8,8);
})()
//数据请求
function getData(x,y){
//
//模拟数据
let data = {
tHead: ["第一列","第二列","第三列","第四列","第五列","第六列","第七列","第八列","第九列","第十列","第十一列","第十二列"],
tDs: ["第一排","第二排","第三排","第四排","第五排","第六排","第七排","第八排","第九排","第十排","第十一排","第十二排"],
list:[{
id: "021215454212",
info: {
a: "Div1",
b: "内容内容内容内容"
}
},
{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},{
id: "021321434212",
info: {
a: "Div2",
b: "wewew"
}
},
]
};
//拿到数据后 将数据放入可拖拽仓库
dragBoxFun(data,x*y)//data 为请求返回数据
createElementFun(x,y,data);
drag();
}
//可拖拽仓库
function dragBoxFun(data,n){
let dragBox = document.getElementById("dragBox");
dragBox.innerHTML = '';
//循环拿到的数据
for(let i in data.list){
if(i>=n){//只留下铺满表格之后的数据
let odiv = document.createElement("div");
odiv.id = 'draggable'+ i;
odiv.className = "ui-draggable ui-draggable-handle";
odiv.setAttribute("width","110");
odiv.setAttribute("bgcolor","peru");
odiv.setAttribute("idData",data.list[i].id);// 这里绑定每条数据的id值, 后续操作每个格子的数据 可以找这个id
let od = document.createElement("div");
od.innerHTML = data.list[i].info.a;
let op = document.createElement("p");
op.innerHTML = data.list[i].info.b;
odiv.appendChild(od);
odiv.appendChild(op);
dragBox.appendChild(odiv);
}
}
}
//初始化表格并添加数据
function createElementFun(x,y,data){
let targetTable = document.getElementById('tableBox');
targetTable.innerHTML = '';//每次点击按钮清空
//表头
let oth = [""]
let tHead = document.createElement("tr");
tHead.setAttribute("height","40");
tHead.className = "t-head";
for(let i = 1; i <= y; i ++){
let hTd = document.createElement("td");
hTd.setAttribute("width","110");
hTd.innerHTML = data.tHead[i-1];//这里塞表头名
tHead.appendChild(hTd);
}
targetTable.appendChild(tHead);
//表格内容
for(let r = 1; r <= x; r++){
let tr = document.createElement("tr");
tr.setAttribute("height","40");
for(let i = 1; i <= y; i ++){
let td = document.createElement("td");
td.id = "target" + i+r;
td.className = "ui-droppable";
td.setAttribute("width","110");
let tdHtml = "";
if(data.list[(r-1)*y+i-1]){
const m = (r-1)*y+i;
tdHtml = `<div id="draggable${m}" width="110" bgcolor="salmon" class="ui-draggable ui-draggable-handle" onmouseleave="hideImg(this)" onmouseenter="showImg(this)">
<div>${data.list[(r-1)*y+i-1].info.a}</div>
<p>${data.list[(r-1)*y+i-1].info.b}</p>
<img src="btn_delete.png" style="display:none;position:absolute;right:42px;top:17px;z-index:100" onclick="deleteFun(this)"/>
</div>`
}
td.innerHTML = tdHtml;//这里塞每个表格内容
tr.appendChild(td);
}
targetTable.appendChild(tr);
}
//列名
data.tDs.unshift("");
for(let t = 0; t <= x; t++){
let otd = document.createElement("td");
otd.setAttribute("width","110");
otd.innerHTML = data.tDs[t];
var first = targetTable.getElementsByTagName("tr")[t].firstChild;//得到页面的bai第一个元素du。
targetTable.getElementsByTagName("tr")[t].insertBefore(otd,first);//在得到的第一个元素之前插入。
}
}
//拖拽
function drag(){
//拖拽复制体
$('div[id^="draggable"]').draggable({
revert: 'invalid',
cursor: "move",
drag: function(event, ui){
console.log(ui.helper.find("img").hide())
}
});
//释放后
$('td[id^="target"]').droppable({
drop: function(event, ui) {
var source = ui.draggable;
source.css({
left:0,
right:0,
bottom:0,
top:0,
zIndex:100
})
if(event.target.children.length > 0){//如果拖动的位置有内容了,就交换位置
let container = source.parent();
if(container[0].nodeName == "TD"){//拖拽元素交换位置必须是表格内的
let temp = document.createElement("div");//创建空元素暂存拖拽位置的元素
$(temp).append($(this).children())
$(this).children().remove() //拖拽目标位置
container.append($(temp).children())
$(this).append(source)
container.append($(temp).children())
}
}else{//如果拖动位置没有内容就将元素添加进表格
if(!source.find("img").length){ // 有删除图标后不再重复添加
$('![]()
', {
src: 'btn_delete.png',
style: 'display:none;position:absolute;right:42px;top:17px;z-index:100',
click: function() {
source.parent().html('');
source.find('img').remove()
$("#dragBox").append(source)
$('div[id^="draggable"]').draggable({
revert: 'invalid',
cursor: "move"
});
}
}).appendTo(source);
}
source.mouseenter(function() {
$(this).find("img").show();
});
source.mouseleave(function() {
$(this).find("img").hide();
});
$(this).append(source);
}
}
});
}
//button点击
$(".button").click(function(){
let x = $(this).text().split("*")[0]
let y = $(this).text().split("*")[1]
getData(x,y);//每次点击重新获取数据好了
})
});
function deleteFun(d){
$("#dragBox").append($(d).parent())
$(d).remove()
}
function showImg(d){
$(d).find("img").show()
}
function hideImg(d){
$(d).find("img").hide()
}
</script>
</body>
</html>