draggable 拖拽 把一个标签拖到另一个框
2020-11-20 本文已影响0人
文芬
拖拽的时候把一个标签拖动到另一个框，且这个框里已经有元素的话，不可再拖进去。
实现原理就是自定义属性，每次拖完去重置属性，标签有属性的不可再拖进去
支持i9及i9+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fl{float: left;}
ul li,ul.a {
line-height: 30px;
display: block;
text-align: left;
width: 200px;
cursor: pointer;
border: 1px solid #ccc;
margin-top: 15px;
height: 30px;
background: #F0EFEF;
border-radius: 5px;
}
</style>
</head>
<body>
<ul class="fl" ondrop="drop(event)" ondragover="allowDrop(event)" id="teamName">
<li ondrop="drop(event)" ondragover="allowDrop(event)" >
<span id="0left2" draggable="true" ondragstart="drag(event)" >7845454521</span>
</li>
<li ondrop="drop(event)" ondragover="allowDrop(event)" >
<span id="0left3" draggable="true" ondragstart="drag(event)" >121231212</span>
</li>
</ul>
<div class="clum clearfix fl">
<ul class="a" ondrop="drop(event)" ondragover="allowDrop(event)" data-drop-done="1">
</ul>
<ul class="a" ondrop="drop(event)" ondragover="allowDrop(event)" data-drop-done="1">
</ul>
</div>
</body>
</html>
<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//清除浏览器默认事件
function allowDrop(ev) {
ev.preventDefault();
}
//把可拖动元素set
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
//有元素不能再拖进去
function drop(ev) {
if (ev.target.getAttribute('data-drop-done') == "1") {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.target.setAttribute('data-drop-done', "");
setAttr();
}
}
// 重置可拖入的属性
function setAttr() {
$.each($('.clum ul'), function(i, val) {
var hasChild = $(this).children().length>0 ? true : false;
if (!hasChild) {
$(this).attr('data-drop-done', 1);
};
})
$.each($('#teamName li'), function(i, val) {
var hasChild = $(this).children().length>0 ? true : false;
if (!hasChild) {
$(this).attr('data-drop-done', 1);
};
})
}
</script>
