javaScript+html5实现图片拖拽

最新推荐文章于 2022-07-07 23:41:24 发布

diaoting2815

最新推荐文章于 2022-07-07 23:41:24 发布

阅读量480

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MrZWJ/p/10065107.html

版权

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5拖拽效果</title>
    <style>
        #d1 {
            width: 400px;
            height: 400px;
            border: solid black 1px;
            float: left;;
        }

        #d2 {
            width: 400px;
            height: 400px;
            border: solid black 1px;
            float: right;;
        }
    </style>
</head>

<body>
<div id="d1">
    <img src="smallPicture.png" id="myImage">
</div>
<div id="d2"></div>
</body>
</html>
<script type="text/javascript">
    var myImage = document.getElementById("myImage");//获取源元素（图片）对象

    myImage.addEventListener("dragstart", MyDrageStart);//对源元素添加开始拖拽监听事件

    function MyDrageStart(event) {
        var imgData = myImage.src;
        var trans = event.dataTransfer;//获得dataTransfer对象
        trans.setData('text', imgData);
//设置源数据（即将源数据放置到dataTransfer中，个人理解即将myImage的是src赋给dataTransfer，相当于一个中间存储的介质）
    }

    var div2 = document.getElementById("d2");
    div2.addEventListener("dragover", MyDragOver);//鼠标每次进入目标元素时触发
    div2.addEventListener("drop", MyDrop);//实现拖放效果时触发，即放下的时候触发


    function MyDragOver(event) {
        event.preventDefault();//去除默认的拖放效果，即html5默认是不允许进行拖放的
    }

    function MyDrop(event) {
        var trans = event.dataTransfer;
        var mysrc = trans.getData("text");//设置目标元素数据
        div2.innerHTML = "<img src=" + mysrc + ">";
        trans.clearData("text");//尽量还是要加上这个，因为dataTransfer是会占用内存的，若是一直不清空会影响浏览器的执行效率
        var div1=document.getElementById("d1");
        div1.removeChild(myImage);//实现将源元素（图片）移到目标元素，而原来的源元素（图片）消失的效果
    }

</script>
效果图：
移动前：

移动后：

转载于:https://www.cnblogs.com/MrZWJ/p/10065107.html

diaoting2815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript+html5实现图片拖拽

源码：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>html5拖拽效果</title> <style> #d1 { width: 400px; heigh...
复制链接

扫一扫