javascript拖拽图片到指定位置_js拖拽图片到指定位置资源-CSDN文库

共23个文件

png：14个

bak：4个

js：4个

需积分: 50 84 浏览量 2018-08-14 16:59:01 上传评论收藏 1.52MB ZIP 举报

在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。我们需要理解拖放（Drag and Drop）的概念。拖放是Web开发中的一个功能，允许用户通过鼠标或触摸设备抓取元素并将其移动到另一位置。在HTML5中，这个功能得到了原生支持，因此我们可以利用JavaScript和jQuery的API来实现这一特性。 1. **HTML结构**：在HTML中，我们需要至少两个元素：一个用于展示图片，另一个作为目标区域。例如： ```html <img id="draggable" src="your_image_path.jpg"> <div id="dropzone"></div> ``` 2. **CSS样式**：为了使拖放更加直观，可以为`#draggable`和`#dropzone`添加合适的样式，如边框、背景色等。 3. **JavaScript/jQuery初始化**：我们需要在JavaScript中获取这两个元素，并启用拖放功能： ```javascript $(document).ready(function() { var $draggable = $('#draggable').draggable(); var $dropzone = $('#dropzone').droppable({ drop: function(event, ui) { // 当图片被拖放到目标区域时执行的函数 } }); }); ``` 4. **实现拖放行为**：在`drop`事件处理函数中，我们需要处理图片的位置。HTML5的`dataTransfer`对象提供了图片的元数据，包括图片源（`dataTransfer.getData('text/plain')`），我们可以利用这些信息更新图片的位置： ```javascript drop: function(event, ui) { var imgSrc = event.originalEvent.dataTransfer.getData('text/plain'); var $img = $('<img>').attr('src', imgSrc); $dropzone.append($img); // 调整图片位置，例如放置在目标区域中心 $img.css({ position: 'absolute', left: $dropzone.width() / 2 - $img.width() / 2, top: $dropzone.height() / 2 - $img.height() / 2 }); } ``` 5. **防止默认行为**：在某些情况下，浏览器可能会有默认的拖放行为，如打开链接或下载文件。我们需要阻止这些默认行为，只保留我们自定义的拖放功能： ```javascript $(document).on('dragstart', '#draggable', function(event) { event.preventDefault(); // 阻止默认的拖放行为 event.originalEvent.dataTransfer.setData('text/plain', this.src); // 设置拖放数据 }); ``` 6. **优化用户体验**：为了让用户知道可以拖放，我们可以添加一些视觉提示，如改变鼠标指针形状或高亮目标区域。同时，考虑不同设备的兼容性，可能需要对触摸事件进行适配。通过以上步骤，我们已经实现了基本的图片拖放功能。不过，实际应用中可能还需要处理更多的细节，比如图片大小的适应、拖放动画、多图片拖放等。这需要根据具体需求进行调整和完善。在学习和实践过程中，了解和掌握HTML5的拖放API以及jQuery的插件机制，将有助于你创建更复杂的交互效果。

资源推荐

资源详情

资源评论

收起资源包目录

javascript拖拽图片到指定位置.zip （23个子文件）

javascript拖拽图片到指定位置

img

11.png 54KB

10.png 72KB

5.png 240KB

9.png 92KB

1.png 43KB

14.png 22KB

6.png 20KB

2.png 51KB

12.png 166KB

7.png 260KB

4.png 41KB

13.png 69KB

8.png 287KB

3.png 131KB

index.html 4KB

drag.js.bak 1KB

drag.js 744B

drag_oop.js.bak 3KB

event.js 2KB

drag_oop.js 2KB

tween.js 11KB

event.js.bak 2KB

tween.js.bak 11KB

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> ul, li { margin: 0; padding: 0; list-style: none; } ul { padding: 5px; width: 480px; height: 640px; margin: 100px auto; position: relative; background: blue; } li { width: 150px; height: 150px; margin: 5px; float: left; overflow: hidden; background: darkorange; cursor: move; -webkit-user-select: none; } li img { width: 150px; height: 150px; display: block; border: none; } </style> <body> <ul> <li><img src="img/1.png"/></li> <li><img src="img/2.png"/></li> <li><img src="img/3.png"/></li> <li><img src="img/4.png"/></li> <li><img src="img/5.png"/></li> <li><img src="img/6.png"/></li> <li><img src="img/7.png"/></li> <li><img src="img/8.png"/></li> <li><img src="img/9.png"/></li> <li><img src="img/10.png"/></li> <li><img src="img/11.png"/></li> <li><img src="img/12.png"/></li> </ul> </body> </html> <script src="js/event.js"></script> <script src="js/drag_oop.js"></script> <script src="js/tween.js"></script> <script> var oLis = document.getElementsByTagName("li"); //第一步：把浮动布局改造成绝对定位布局，否则无法拖拽 for (var i = oLis.length - 1; i >= 0; i--) { var oLi = oLis.item(i); oLi.style.top = (oLi.t = oLi.offsetTop) + "px"; oLi.style.left = (oLi.l = oLi.offsetLeft) + "px"; oLi.style.position = "absolute";//定位要后做 oLi.style.margin = 0; var obj = new Drag(oLi); obj.border(); obj.on("dragstart", increaseIndex); obj.on("dragend", goHome); obj.on("drag", getHited); obj.on("dragend",changePosition); } //点谁谁到前面 var index = 0; function increaseIndex() { this.ele.style.zIndex = ++index; } //回到原位 function goHome() { animate(this.ele, {left: this.ele.l, top: this.ele.t}, 400, 2); } //碰撞变色 function getHited() { var ele = this.ele; this.aHited = []; for (var i = 0; i < oLis.length; i++) { var oLi = oLis.item(i); if (ele == oLi)continue; oLi.style.background=""; if (test(ele, oLi)) { oLi.style.background = "yellow"; this.aHited.push(oLi);//把装上的保存到数组里 } } } function test(r, b) { if (r.offsetLeft + r.offsetWidth < b.offsetLeft || r.offsetTop + r.offsetHeight < b.offsetTop || r.offsetLeft > b.offsetLeft + b.offsetWidth || r.offsetTop > b.offsetTop + b.offsetHeight) { return false;//以上没有相撞 } else { return true; } } //图片交换位置 function changePosition(){ var a=this.aHited; if(a){ for(var i=0;i< a.length;i++){ var oLi=a[i]; var ele=this.ele; oLi.distance=Math.pow(oLi.offsetLeft-ele.offsetLeft,2)+Math.pow(oLi.offsetTop-ele.offsetTop,2); } a.sort(function(a,b){ return a.distance- b.distance; }); a[0].style.background="black"; oLi=a[0]; animate(oLi,{left:ele.l,top:ele.t},400,4); animate(ele,{left:oLi.l,top:oLi.t},400,3); var templ=ele.l; var tempt=ele.t; ele.l=oLi.l; ele.t=oLi.t; oLi.l=templ; oLi.t=tempt; } } </script>

评论收藏

内容反馈