原生js复制拖拽的图片到目的地的方法

最新推荐文章于 2023-01-30 22:01:36 发布

丰云

最新推荐文章于 2023-01-30 22:01:36 发布

阅读量1.7k

点赞数 2

分类专栏：前端应用文章标签：图片拖拽复制

本文链接：https://blog.csdn.net/foren_whb/article/details/95493115

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本来看到这个问题，以为很简单，实际做的过程中，发现远比想象的困难，因为图片在拖拽的时候，鼠标脱离了当前dom,不响应常规的鼠标事件。后来通过查资料，发现js提供了拖拽的事件方法。

现在把简单实现的方法整理如下，以备参考：

<!DOCTYPE html />
<html>
<head>
    <title>drag image</title>
</head>
<body>
    <div style="width: 100%; height: 100%; position:relative;">
        <div id="tag" style="left:0px; top:100px; width: 200px; height: 100px; position:relative; border: 1px solid #666;"></div>
        <img id="src" src="images/allaboutyou.png" draggable="true" style="left:0px; top:0px; width: 50px; height: 50px; position:absolute;" >
    </div>
</body>
</html>
<script type="text/javascript">

        var img = document.getElementById('src');
        var div = document.getElementById('tag');
        var x = 0, y = 0,
            w = parseInt(div.style.width, 10),
            h = parseInt(div.style.height, 10),
            l = parseInt(div.style.left, 10),
            t = parseInt(div.style.top, 10),
           ol = parseInt(img.style.left, 10),
           ot = parseInt(img.style.top, 10);
        img.addEventListener("dragstart", function (e) {
            x = e.pageX;
            y = e.pageY;
        }, false);
        div.addEventListener("dragenter", function (e) {
            e.preventDefault();
        }, false);
        div.addEventListener("dragover", function (e) {
            e.preventDefault();
        }, false);
        div.addEventListener("drop", function(e) {
            e.preventDefault();
            var nl = e.pageX - x + ol,
                nt = e.pageY - y + ot;
            if ((nt > t && nl > l) && (nt < (t + h) && nl < (l + w))) {
                var n = img.cloneNode();
                n.style.top = (nt - t) + 'px';
                n.style.left = (nl - l) + 'px';
                div.innerHTML = n.outerHTML;
            }
        }, false);
</script>

丰云

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生js复制拖拽的图片到目的地的方法

本来看到这个问题，以为很简单，实际做的过程中，发现远比想象的困难，因为图片在拖拽的时候，鼠标脱离了当前dom,不响应常规的鼠标事件。后来通过查资料，发现js提供了拖拽的事件方法。现在把简单实现的方法整理如下，以备参考：<!DOCTYPE html /><html><head> <title>drag image</titl...
复制链接

扫一扫