拖拽图片到另一个div里

最新推荐文章于 2024-04-28 10:55:39 发布

weixin_30615767

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量449

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/add-really/p/7131667.html

版权

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="img/a.jpg" alt="mytu" draggable="true" id="mytu"/>
    <!--第二步 设置 放置位置 触发事件 dragover-->
    <!--第三步 设置 放置之后 触发事件 dragover-->
    <div id="taa"></div>
</body>
<script src="JS/tuo.js"></script>
</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

weixin_30615767

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
拖拽图片到另一个div里

HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #taa{width: 300px;height: 300px;...
复制链接

扫一扫