首页 > 代码库 > 拖拽图片到另一个div里

拖拽图片到另一个div里

2024-10-18 05:44:39   213人阅读

HTML代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #taa{width: 300px;height: 300px;background: #DEDEDE;}
    </style>
</head>
<body>
    <!--第一步 设置 拖拽的属性 draggable="true" 绑定drag事件-->
    <img src="http://www.mamicode.com/img/a.jpg" alt="mytu" draggable="true" id="mytu"/>
    <!--第二步 设置 放置位置 触发事件 dragover-->
    <!--第三步 设置 放置之后 触发事件 dragover-->
    <div id="taa"></div>
</body>
<script src="http://www.mamicode.com/JS/tuo.js"></script>
</html>

 

jQuery代码

 

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

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

 mytu.ondragstart=drag;//拖动什么
 taa.ondragover=dragover;//放到何处
 taa.ondrop=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=http://www.mamicode.com/ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    console.log("huam");
}
})();

 

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

 

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

 

拖拽图片到另一个div里


联系
我们