拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后 触发的事件 dragover 下面请看代码:

(function(){
/*-------节点--------*/
var myimg = document.getElementById('myimg');
var dropBox = document.getElementById('dropBox');

/*-------事件绑定--------*/
myimg.ondragstart = drag;
dropBox.ondragover = dragover;
dropBox.ondrop = drop;

/*-------函数--------*/
function drag(ev){
//通过ondragstart事件去存储 当前节点的 id 到 ev.dataTransfer 里面
ev.dataTransfer.setData('Text',ev.target.id);
console.log('拖拽的开始');
}

function dragover(){
console.log('hhh');
//***** 注意:添加一个默认事件的取消 使得drop生效!!!
event.preventDefault();
}

function drop(ev){
var data = ev.dataTransfer.getData('Text');
ev.target.appendChild(document.getElementById(data));
}

})();
posted @ 2017-07-07 12:11  nozuonodai  阅读(2754)  评论(0编辑  收藏  举报