js实现图片拖拽效果

没拖拽之前

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.wrapper {width: 375px;border: 1px solid;margin: 0 auto;min-height: 500px;border-radius: 10px;padding: 20px;background-color: #28263b;color: #fff;position: relative;}.box {display: flex;flex-wrap: wrap;justify-content: space-around;align-content: flex-start;}.box img {width: 45px;height: 45px;padding: 10px 20px;}.fix {padding: 0 20px;width: 45px;height: 0;}.my {min-height: 150px;position: relative;}.pop {width: 150px;height: 30px;background-color: #fff;position: absolute;top: 50%;margin-top: -15px;text-align: center;line-height: 30px;padding: 10px 20px;border-radius: 5px;display: none;color: #000;}</style></head><body><div class="wrapper"><p>最近使用的小程序</p><div class="box last"><imgdraggable="true"src="./imgs/下箭头.png"alt=""/><imgdraggable="true"src="./imgs/错误.png"alt=""/><imgdraggable="true"src="./imgs/修改.png"alt=""/><span class="fix"></span><span class="fix"></span><span class="fix"></span></div><p>我的小程序</p><div class="box my"><span class="fix"></span><span class="fix"></span><span class="fix"></span><div class="pop">松手把图标放在这里</div></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script><script>// 已经拖动的元素下标var finishList = [];// 当前拖动的下标var currIndex;// 开始拖动$(".last>img").on("dragstart", function (event) {currIndex = $(this).index() + 1;console.log(currIndex)});// 放下元素$(".my").on("drop", function (event) {// 判断是否已经放进去了if (!finishList.includes(currIndex)) {finishList.push(currIndex);var $clone = $(`.last img:nth-child(${currIndex})`).clone();$(this).prepend($clone);console.log(finishList)}});// 进入元素范围, 阻止默认事件(必须)$(".my").on("dragover", function (event) {event.preventDefault();});// 进入元素$(".my").on("dragenter", function (event) {if (finishList.includes(currIndex)) {$(".pop").text("目标已存在");} else {$(".pop").text("松手把图标放在这里");}$(".my").css("background", "rgba(0,0,0,.5)");$(".pop").css("display", "block");});// 拖动结束$(document).on("dragend", function () {$(".my").css("background", "");$(".pop").css("display", "none");});</script></body>
</html>

拖拽之后

也可以查看其他的例子，便于理解

菜鸟教程在线编辑器https://www.runoob.com/try/try.php?filename=tryjsref_ondrop

js实现图片拖拽效果相关推荐

html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件通过获取鼠标的坐标(clientX,clientY)来改变面板的位置注意:面板使用绝对定位方式,是以左上角为参考点, ...
js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
MFC中listctrl图片拖拽效果
CEffectList继承基类clistctrl 程序运行效果如下,使用的VS2013 要注意的地方,假如要将控件拖出窗口以外的地方,需要修改拥有拖拽窗口的属性:m_pDragImageList-&g ...
js实现鼠标拖拽效果
初步 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...

js实现图片拖拽效果

也可以查看其他的例子，便于理解

js实现图片拖拽效果相关推荐

最新文章

热门文章