大家好，有时候在开发前端时我们会时不时的会在浏览器网页上需要，会移动图片或者元素等等，这样我们就要使用拖放的技术Drag and Drop(DnD)，拖放(DnD)是HTML5的第一规范定义了一种基于事件的机制、JavaScript API和其他标记，用于声明页面上几乎任何类型的元素都可以拖放。我认为没有人会反对本地浏览器对某个特性的支持。本地浏览器DnD意味着更快、响应更快的web应用程序。
拖放是一个非常常见的特性。它是指你“抓取”一个对象并将其拖到另一个位置。
为什么使用拖放技术？
例如，想象一个棋子移动动的象棋游戏或者可移动的图片，他们都需要拖放技术的支持。尽管浏览器支持已经相当完善，但是确定浏览器是否实现了DnD(或任何HTML5特性)对于提供一个可以很好地降解的解决方案是很重要的。当DnD不可用时，启动该库备份以维护一个可用的应用程序。
如何使用拖放技术？
接下来我使用两种方式进行一个是HTML和js
1.HTML拖拽的例子
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> //定义一个拖拽的开关，是否允许拖放。 function allowDrop(ev) { ev.preventDefault(); } //拖拽 function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } //放 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://www.sky8g.com/skin/sky8g/sky8g.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> |
2.使用js/jquery进行实现
A. 第一个示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery example: drag and drop</title> <style> body { font-size: 32px; } #dropzone { top: 150px; width: 200px; height: 200px; background: cyan; border: solid 1px; } </style> </head> <body> <div>Drag Winston into the rectangle</div> <img id="winston" src="https://www.sky8g.com/skin/sky8g/Winston.png"> <div id="dropzone"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Also include jQueryUI --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $("#winston").draggable(); $("#dropzone").droppable({ drop: function(event, ui) { $(this).css('background', 'rgb(0,200,0)'); }, over: function(event, ui) { $(this).css('background', 'orange'); }, out: function(event, ui) { $(this).css('background', 'cyan'); } }); </script> </body> </html> |
B. 第二个示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"> </script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass("ui-state-highlight").find("p").html("Dropped!"); } }); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> </body> </html> |
在本篇文章中，我讨论了拖放。我希望它对那些正在工作或正在考虑工作的人有用。