拖拽div的值到table

2018-10-12 本文已影响0人 lovekeep

Html 代码

<!DOCTYPE html>

<head>

<title>jQeruyUI拖拽效果_拖拽div的值到table表格里面1</title>

<style>

table {

border-collapse: collapse;

}

table td {

empty-cells: show

}

#table-tab {

float: left;

width: 600px;

height: 300px;

}

#table-tab table {

width: 800px;

height: 300px;

display: none;

}

#table-tab table tr {

border: 1px solid #666666;

}

#table-tab table tr td {

width: 500px;

border: 1px solid #666666;

}

#table-tab table tr th{

border: 1px solid #666666;

}

.divPart{

width: 120px;

height: 30px;

line-height: 30px;

background-color: green;

border: 1px solid white;

}

#precessText{

width:200px;

height:200px;

text-align: center;

line-height: 36px;

float: left;

/* overflow-x: hidden; */

}

</style>

</head>

<body>

<h2>拖拽div的值到table表格里面</h2>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</div>

</div>

</body>

</html>

JS代码

//动态创建拖拽元素

var partArr = ['桩基', '承台', '箱梁', '盖梁', '桩基', '承台', '箱梁', '盖梁'];

for (var i = 0; i < 8; i++) {

var div = document.createElement('div');

div.id = "draggable" + i;

div.className = 'divPart';

div.title = 'zhuangJi';

div.innerText = partArr[i];

$('#precessText').append(div);

}

//切换table表格

var count = 0;

var tabTogggle = gettableList();

//切换到下一个

function nextTable() {

if (count == tabTogggle.length - 1) {

return;

}

count++;

tabTogggle[count - 1].style.display = 'none';

tabTogggle[count].style.display = 'block';

}

//切换到上一个

function preveTable() {

if (count == 0) {

return;

}

count--;

tabTogggle[count + 1].style.display = 'none';

tabTogggle[count].style.display = 'block';

}

//获取div下面的所有table

function gettableList() {

var table = document.getElementById('table-tab');

var tableList = removeWhiteNode(table.childNodes);

var arr = [];

for (var i = 0; i < tableList.length; i++) {

arr.push(tableList[i]);

}

return arr;

}

//去除空白文本节点

function removeWhiteNode(node) {

for (var i = 0; i < node.length; i++) {

if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {

node[i].parentNode.removeChild(node[i]);

}

return node;

}

//根据存放droggable的ID获取table表头的时间

function getTime(id) {

//获取到所有的tr

var getTable= gettableList();

var tabChildList = removeWhiteNode(getTable[0].childNodes);

var trList = removeWhiteNode(tabChildList[0].childNodes);

console.log(trList);

for (var i = 0; i < trList.length; i++) {

for (var j = 0; j < trList[i].childNodes.length; j++) {

if(id == trList[i].childNodes[j].id){

return trList[0].childNodes[j].innerHTML;

}

</script>

//在页面加载完之后加载jquery

$().ready(function (e) {

//拖拽复制体

$('div[id^="draggable"]').draggable({

revert: 'invalid' //未放到droppable上时，回到原位置

});

//释放后

$('td[id^="target"]').droppable({

drop: function (event, ui) {

var thValue = getTime(event.target.id);

console.log(thValue);

var source = ui.draggable;

$('.ui-draggable').css({ "left": "0px", "top": "0px", "text-align": "center" });

source.draggable("disable");

$('<img/>', {

src: 'img/btn_delete.png',

style: 'display:none',

click: function () {

source.draggable("enable");

$('#precessText').prepend(source);

$(this).remove();

}

}).appendTo(source);

source.mouseenter(function () {

$(this).find("img").show();

});

source.mouseleave(function () {

$(this).find("img").hide();

});

$(this).append(source);

});

</script>

拖拽div的值到table

Html 代码

JS代码

猜你喜欢

热点阅读