查看: 3724|回复: 0

[DIV/CSS] JavaScrip拖放功能与拖放事件

发表于 2018-3-18 09:18:45

利用mousedown、mousemove和mouseup实现拖放功能

创建一个绝对定位(position:absolute)的元素,点击(mousedown)这个元素,并按住鼠标按钮不放,将鼠标移动(mousemove)到另一个区域,然后释放(mouseup)鼠标按钮。

代码如下:

html代码

  1. <div class='draggable'>
  2. </div>
复制代码

css代码

  1. .draggable{
  2. width:50px;
  3. height:50px;
  4. background:red;
  5. position:absolute;
  6. }
复制代码

JavaScript代码

  1. var EventUtil={
  2. getEvent:function(event){
  3. return event?event:window.event;
  4. },
  5. getTarget:function(event){
  6. return event.target||event.srcElement;
  7. },
  8. addHandler: function(element, type, handler) {
  9. if (element.addEventListener) {
  10. element.addEventListener(type, handler, false);
  11. } else if (element.attachEvent) {
  12. element.attachEvent('on' + type, handler);
  13. } else {
  14. element['on' + type] = handler;
  15. }
  16. }
  17. }
  18. var DragDrop = function() {
  19. var dragging = null;
  20. var diffX = 0;
  21. var diffY = 0;
  22. function handleEvent(event) {
  23. event = EventUtil.getEvent(event);
  24. var target = EventUtil.getTarget(event);
  25. switch (event.type) {
  26. case "mousedown":
  27. if (target.className.indexOf("draggable") > -1) {
  28. dragging = target;
  29. diffX = event.clientX - target.offsetLeft;
  30. diffY = event.clientY - target.offsetTop;
  31. }
  32. break;
  33. case "mousemove":
  34. if (dragging !== null) {
  35. dragging.style.left = (event.clientX - diffX) + "px";
  36. dragging.style.top = (event.clientY - diffY) + "px";
  37. }
  38. break;
  39. case "mouseup":
  40. if (target.className.indexOf("draggable") > -1) {
  41. dragging = null;
  42. }
  43. break;
  44. }
  45. }
  46. return{
  47. enable :function() {
  48. EventUtil.addHandler(document, "mousedown", handleEvent);
  49. EventUtil.addHandler(document, "mousemove", handleEvent);
  50. EventUtil.addHandler(document, "mouseup", handleEvent);
  51. },
  52. disable:function() {
  53. EventUtil.removeHandler(document, "mousedown", handleEvent);
  54. EventUtil.removeHandler(document, "mousemove", handleEvent);
  55. EventUtil.removeHandler(document, "mouseup", handleEvent);
  56. }
  57. }
  58. }()
复制代码

调用方法

  1. DragDrop.enable()
复制代码

*元素Div中的 class='draggable' 这个属性设置很重要,首先在CSS代码中需要设置绝对定位(position:absolute),其次在JavaScript代码中通过(target.className.indexOf("draggable") > -1)语句来判断当前拖放的元素。


HTML5拖放事件

1、 拖动某个元素时,将依次触发下列事件

dragstart:按下鼠标并开始移动鼠标时,会在被拖动的元素上触发
drag:元素在被拖动期间持续触发
dragend:用户结束元素拖动后触发

注意

①默认情况下,文本在选中的情况下可以被拖动,而图像和链接在任何时候都可以被拖动。如果想让其他元素都可以被拖动,可以把元素的draggable属性设置为true。图像和链接的draggable属性值默认为true,其他元素的draggable属性值默认为false。
②和上述使用mousedown、mousemove和mouseup封装的拖放功能的不同之处是:目标元素在被拖动的情况下,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随着光标移动。

测试代码:

  1. <div id='box' draggable='true' style='width:50px;height:50px;background:red'>
  2. </div>
  3. <span></span>
  4. var box=document.getElementById("box")
  5. var span=document.getElementsByTagName("span")[0]
  6. box.addEventListener("dragstart", function(event) {
  7. span.innerHTML ='start!'
  8. })
  9. box.addEventListener("drag", function(event) {
  10. span.innerHTML ='move!'
  11. })
  12. box.addEventListener("dragend", function(event) {
  13. span.innerHTML ='end!'
  14. })
  15. //输出:start!/move!/end!
复制代码

2、 当某个元素被拖动到一个有效放置目标上时,在这个放置目标上会依次触发下列事件

dragenter:元素被拖动到放置目标上,就会触发
dragover:被拖动的元素在放置目标的范围内移动时持续触发
dragleave:元素被拖出了放置目标时触发(没有释放鼠标按钮)
drop:元素被放到了放置目标时触发(释放鼠标按钮)

注意

① 如果被拖动的元素经过某些无效放置目标时,就不会触发drop事件,但可以通过阻止放置目标元素的dragenter和dragover事件的默认行为,让任何元素都变成有效的放置目标。
② 在Firefox3.5+中,drop事件的默认行为是打开被放到放置目标上的URL(例如图像被拖放到放置目标上时,页面就会转向图像文件),所以需要阻止drop事件的默认行为。
③ 为了在拖放操作时实现数据交换,可以在拖放事件的事件处理程序中访问dataTransfer对象。dataTransfer对象有两个方法:setData()和getData()。
setData()方法:设置拖放操作时指定的数据类型(“Text”或“URL”)和数据内容。
getData()方法:取得由setData()保存的值,参数为字符串“text”或“URL”,表示数据类型,且只能在drop事件处理程序中读取。为了更好地在跨浏览器的情况下从dataTransfer对象中取得数据,建议在取得文本数据时使用“Text”,
在取得URL数据时进行如下检测:
var
url=dataTransfer.getData('url')||dataTransfer.getData('text/uri-list')。

测试代码:

  1. <div id='docker' style='width:80px;height:80px;border:1px solid #000;'>
  2. </div>
  3. <div id='box' draggable='true' style='width:50px;height:50px;background:red'>
  4. </div>
  5. <span></span>
  6. var docker=document.getElementById("docker")
  7. var box=document.getElementById("box")
  8. var span=document.getElementsByTagName("span")[0]
  9. box.addEventListener("dragstart", function(event) {
  10. event.dataTransfer.setData("Text",event.target.id);
  11. span.innerHTML ='start!'
  12. })
  13. docker.addEventListener("dragenter", function(event) {
  14. event.preventDefault();
  15. event.target.style.borderColor='red';
  16. })
  17. docker.addEventListener("dragover", function(event) {
  18. event.preventDefault();
  19. span.style.color='red';
  20. })
  21. docker.addEventListener("dragleave", function(event) {
  22. event.preventDefault();
  23. event.target.style.borderColor='#000';
  24. span.style.color='#000';
  25. })
  26. docker.addEventListener("drop", function(event) {
  27. event.preventDefault();
  28. var id=event.dataTransfer.getData("Text");
  29. event.target.appendChild(document.getElementById(id));
  30. span.innerHTML ='OK!'
  31. })
复制代码

利用事件委托技术,给document对象添加事件处理程序,完成一个拖放事件的综合实例

例子:

HTML代码

  1. <div class="docker">
  2. <div id="dragBox" draggable='true'>
  3. Text
  4. </div>
  5. </div>
  6. <div class="docker"></div>
  7. <div class="docker"></div>
  8. <div class="docker"></div>
复制代码

CSS代码

  1. #dragBox {
  2. width: 200px;
  3. height: 20px;
  4. text-align: center;
  5. background: white;
  6. }
  7. .docker {
  8. width: 200px;
  9. height: 20px;
  10. background: #ddd;
  11. margin-bottom: 10px;
  12. padding: 10px;
  13. }
复制代码

JavaScript代码

  1. document.addEventListener("dragstart", function( event ) {
  2. event.dataTransfer.setData("Text",event.target.id);
  3. event.target.style.opacity =0.5;
  4. });
  5. document.addEventListener("dragend", function( event ) {
  6. event.target.style.opacity = "";
  7. });
  8. document.addEventListener("dragover", function( event ) {
  9. event.preventDefault();
  10. });
  11. document.addEventListener("dragenter", function( event ) {
  12. event.preventDefault();
  13. if ( event.target.className == "docker" ) {
  14. event.target.style.background = "#ccc";
  15. }
  16. });
  17. document.addEventListener("dragleave", function( event ) {
  18. if ( event.target.className == "docker" ) {
  19. event.target.style.background = "";
  20. }
  21. });
  22. document.addEventListener("drop", function( event ) {
  23. event.preventDefault();
  24. if ( event.target.className == "docker" ) {
  25. var id=event.dataTransfer.getData("Text");
  26. event.target.appendChild(document.getElementById(id));
  27. event.target.style.background = "";
  28. }
  29. });
复制代码

文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。



回复

使用道具 举报