拖拽图片到另一个div里

HTML代码

 

 

jQuery代码

 

(function(){
/*------------------节点-------------- */
    var mytu=document.getElementById("mytu");
    var taa=document.getElementById("taa");
/*------------------事件锁定-------------- */

//ondragstart - 用户开始拖动元素时触发
//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

 mytu.ondragstart=drag;//拖动什么
 taa.οndragοver=dragover;//放到何处
 taa.οndrοp=drop;//进行放置
 /*------------------函数------------- */

function drag(ev){
    //通过ondragstart事件存储 当前节点ID到ev.dataTransfer里面
    //数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
    ev.dataTransfer.setData("Text",ev.target.id);
    console.log("hollk");

}
function dragover(){
    event.preventDefault();
    //添加一个默认事件的取消 使得drop生效
    console.log("koml");
}
function drop(ev){
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    console.log("huam");
}
})();

 

• • 在拖动目标上触发事件 (源元素):
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发

 

• • 释放目标时触发的事件:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

 

转载于:https://www.cnblogs.com/add-really/p/7131667.html