<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<div class="file-item" type-data="1" id-data="1" >
<div class="" style="width: 20%; margin-left: 65px;">
<img src="wenjianjia.png" style="height: 28px; margin-top: 5px; ">
fu
</div>
</div>
<div class="file-item ng-scope" type-data="3" id-data="3" >
<div class="" style="width: 20%; margin-left: 65px;" >
<img src="txt.png" style="height: 28px; margin-top: 5px; ">
son
</div>
</div>
<script type="text/javascript">
//添加拖动属性
$(document).ready(function () {
$('.file-item').each(function () {
var type = $(this).attr('type-data');
console.log(type);
$(this).attr({
"draggable": "true",
"ondragstart": "drag(event,this)"
});
//如果是文件夹 允许被拖进去
if (type == '1') {
$(this).attr({
"ondrop": "drop(event,this)",
"ondragover": "allowDrop(event)"
});
}
});
})
function drag(ev,el)
{
var sid = $(el).attr('id-data');
ev.dataTransfer.setData("Text",sid);
}
function allowDrop(ev,ed)
{
ev.preventDefault();
}
function drop(ev,ed)
{
ev.preventDefault();
var fid = $(ed).attr('id-data');
var sid =ev.dataTransfer.getData("Text");
yingcang(sid);
console.log('fid:',fid,'sid:',sid);
// ev.target.appendChild(document.getElementById(data));
}
//目前做法 ,id-data相同则隐藏
function yingcang(data)
{
$('.file-item').each(function ()
{
var id = $(this).attr('id-data');
if (id == data)
{
$(this).css("display","none");
}
});
}
</script>