web前端高级--简易图片拖动（模仿购物车）

最新推荐文章于 2023-12-18 02:06:26 发布

一条期待翻身的咸鱼

最新推荐文章于 2023-12-18 02:06:26 发布

阅读量777

点赞数

本文链接：https://blog.youkuaiyun.com/cao_wen/article/details/104783449

版权

本文主要介绍了如何使用JavaScript实现一个简单的图片拖动功能，类似于购物车中商品图片的拖动效果。通过监听鼠标事件，结合元素位置信息，实现图片随鼠标移动，为web前端开发提供一种交互增强的实现方式。

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

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <title>HTML中元素(图片)的拖动</title>
   <style type="text/css">
     .goodsList{
       width:550px;
       height:240px;
       background-color:#CCC;
       float:left;
     }
     
     .shoppingCart{
       width:550px;
       height:240px;
       background-color:#CCC;
       float:left;
       margin-left:50px;
     }
     
     img{
       width:100px;
       height:147px;
       margin:3px;
     }
     
     #emptyDiv{
       width:50px;
       height:50px;
       background-color:#F60;
     }
   </style>
   
   <script type="text/javascript">
     //创建一个图像元素
     var myIcon = document.createElement("img");
     //设置图像的src属性
     myIcon.src="images/myIcon.gif";
     
     //拖动方法
     function drag(e){
    	 e.dataTransfer.effectAllowed="copy";//复制//link
    	 //IE暂时并不支持，FF、chrome支持该