首页 > 代码库 > 拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后 触发的事件 dragover 下面请看代码：
拖拽的效果 第一步 设置 可拖拽的属性 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 = http://www.mamicode.com/ev.dataTransfer.getData(‘Text‘);
ev.target.appendChild(document.getElementById(data));
}
})();拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后 触发的事件 dragover 下面请看代码：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。