大佬教程收集整理的这篇文章主要介绍了hmtl5 拖放研究,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
function dragstart_handler(ev) {
console.log("dragStart");
ev.dataTransfer.setData("text",ev.target.id);
}
function drag_handler(ev){console.log("drag");}
function dragenter_handler(ev) {console.log("dragEnter");}
function dragleave_handler(ev) {console.log("dragLeave");}
function dragend_handler(ev) {console.log("dragend");}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function init() {
var source = document.getElementById("source");
source.addEventListener('dragstart',dragstart_handler);
//此处注释掉避免频繁的打印,影响观察 //source.addEventListener('drag',drag_handler);
source.addEventListener('dragenter',dragenter_handler);
source.addEventListener('dragleave',dragleave_handler);
source.addEventListener('dragenter',dragenter_handler);
source.addEventListener('dragend',dragleave_handler);
var target = document.getElementById("target");
target.addEventListener('dragover',dragover_handler);
target.addEventListener('drop',drop_handler);
}
init();
@H_197_5@将source从原来位置放到target中,打印的内容是:
@H_197_5@
@H_197_5@这里主要要讲的是,dragenter和dragleave。先入为主,自己刚开始理解是进入和离开target时,会触发dragenter和dragleaver,但在测试中发现,自己犯了一个很低级的错误,因为source可以放到多个容器中,不一定是我们 要放的target中,看看官方的解释:
@H_197_5@
@H_197_5@
@H_197_5@所以在测试中,会看到,source一移出原来位置一点距离,就触发dragenter,如果source整个移出原来的位置,就触发dragleave。 function dragover_handler(ev) {
ev.preventDefault();
}
function dragstart_handler(ev) {
ev.dataTransfer.setData("text/plain",ev.target.id);
ev.dataTransfer.setData("text/html","<p>Example paragraph</p>");
ev.dataTransfer.setData("text/uri-list","http://developer.mozilla.org");
}
function drop_handler(ev) {
ev.dataTransfer.getData("text/plain");
ev.dataTransfer.getData("text/html");
ev.dataTransfer.getData("text/uri-list");
}
//改变鼠标指针的位置为虚拟被拖动元素的左上角
ev.dataTransfer.setDragImage(ev.target,0,0);
function dragstart_handler(ev) {
ev.dataTransfer.setData("text",ev.target.id);
}
function drop_handler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
@H_197_5@如果你通过innerHTML和outerHTML来添加节点,能实现copy效果,除非你再手动remove被拖动的元素。
以上是大佬教程为你收集整理的hmtl5 拖放研究全部内容,希望文章能够帮你解决hmtl5 拖放研究所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。