拖拽的效果 第一步 设置 可拖拽的属性 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));
}

})();


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM