JavaScript鼠标拖动图片

置顶

coder_路远

于 2018-08-13 11:43:57 发布

阅读量1k

点赞数

分类专栏： JavaScript学习文章标签：鼠标拖动图片 JavaScript拖动图片 js拖拽图片

本文链接：https://blog.youkuaiyun.com/qq_37338983/article/details/81627134

版权

本文介绍了如何利用JavaScript实现图片的拖放功能，包括监听鼠标事件、设置拖动样式、处理拖放操作等关键步骤，让你轻松打造交互式的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img { position: absolute; }
</style>

<body>
<script type='text/javascript'>
   function moveImage() {
        let moveId = document.getElementById("move");
        moveId.style.top = "200px";
        moveId.style.left = "200px";
        moveId.style.position = "absolute";

        document.onmousedown = coordinates;
        document.onmouseup = mouseup;

        let leftp = undefined;
        let topp = undefined;
        let xcoor = undefined;
        let ycoor = undefined;

        function coordinates(e) {
            if (e === null) { e = window.event;}
            let sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

            if (sender.id === "move") {

最低0.47元/天解锁文章