码迷,mamicode.com
首页 > Web开发 > 详细

关于HTML5中拖放

时间:2015-07-13 00:47:01      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

拖拽 

 事件:
dragstart拖拽开始
drag拖拽中
dragend拖拽结束
dragenter进入投放区
dragover投放区中移动
dragleave离开投放区
drop投放

-------------------
一般在dragover(投放区中移动)事件中,默认地,无法将数据元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。可通过调用 ondragover 事件的 event.preventDefault()方法。

dragstart(拖拽开始)事件中可以传值,通过dataTransfer.setData() 方法设置被拖数据的数据类型和值.然后可以在drop(投放)事件中得到开始出传过来的值,通过dataTransfer.getData()方法获取。

下面是一个简单的拖放代码:(后面封装的函数都是兼容性的,可以作为参考文件。)

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  #dropBlock{
  height: 300px;
  width: 300px;
  background: #4E67AB;
  border: 1px dashed #ddd;
  }
  #moveBlock{
  position: absolute;
  height: 80px;
  width: 80px;
  background: #CB8112;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
  }
  </style>
  </head>
  <body>
   
  <div id="dropBlock"></div>
  <div id="moveBlock" draggable="true"></div>
  </body>
   
  <script>
   
  (function(){
  var moveBlock = $("moveBlock");
  var dropBlock = $("dropBlock");
  var startPoint;
  var moveBlockPosintion
  // console.log(moveBlock);
  addEvent(moveBlock,"dragstart",function(e){
   
  e = getEventObject(e);
  startPoint = getPointerPositionInDocument(e);
  moveBlockPosintion = getDimensions(moveBlock);
  });
  // addEvent(moveBlock,"drag",function(){
  // console.log("拖拽中");
  // });
  // addEvent(moveBlock,"dragend",function(){
  // console.log("拖拽结束");
  // });
  // addEvent(dropBlock,"dragenter",function(){
  // console.log("进入投放区");
  // });
  addEvent(dropBlock,"dragover",function(e){
   
  e = getEventObject(e);
  //阻止默认事件发生
  stopDefault(e);
  });
  // addEvent(dropBlock,"dragleave",function(){
  // console.log("离开投放区");
  // });
  addEvent(dropBlock,"drop",function(e){
  e = getEventObject(e);
  var endPoint = getPointerPositionInDocument(e);
  setStyle(moveBlock,{
  left:moveBlockPosintion.left + (endPoint.x - startPoint.x)+"px",
  top:moveBlockPosintion.top + (endPoint.y - startPoint.y)+"px"
  });
  });
   
  })();
   
  //封装document.getElementById();
   
  function $() {
  var elements = new Array();
   
  for (var i = arguments.length - 1; i >= 0; i--) {
  var element = arguments[i];
   
  if (typeof element == "string") {
  element = document.getElementById(element);
  }
   
  if (arguments.length == 1) {
  return element;
  } else {
  elements.push(element);
  }
   
  return elements;
  };
  };
   
   
  //封装事件处理
  function addEvent(node, type, listener) {
  if (!(node = $(node))) return false;
  if (node.addEventListener) {
  //W3C
  node.addEventListener(type, listener, false);
  return true;
  } else if (node.attachEvent) {
  node[‘e‘ + type + listener] = listener;
  node[type + listener] = function() {
  node[‘e‘ + type + listener](window.event);
  };
  node.attachEvent(‘on‘ + type, node[type + listener]);
  return true;
  }
   
  return false;
   
  };
   
  //移出事件
  function removeEvent(node,type,listener){
  if (!(node = $(node))) return false;
  if(node.removeEventListener){
  node.removeEventListener(type,listener,false);
  return true;
  }else if(node.removeEvent){
  node.detachEvent(‘on‘+type,node[type+listener]);
  node[type+listener] = null;
  return true;
  }
  return false;
  };
  //获取事件对象
  function getEventObject(e){
  return e || window.event;
   
  }
  //阻止事件冒泡
  function stopPropagation(eventObject){
  var eventObject = eventObject || getEventObject();
  if(eventObject.stopPropagation){
  eventObject.stopPropagation();
  }else{
  eventObject.cancelBubble = true;
  }
  };
  //阻止浏览器默认 事件
  function stopDefault(eventObject){
  var eventObject = eventObject || getEventObject();
  if(eventObject.preventDefault){
  eventObject.preventDefault();
  }else{
  eventObject.returnValue = false;
  }
  };
  //获取鼠标点击时的x和y坐标
  function getPointerPositionInDocument(eventObject) {
  eventObject = eventObject || getEventObject(eventObject);
  var x = eventObject.pageX || (eventObject.clientX +
  (document.documentElement.scrollLeft || document.body.scrollLeft));
  var y = eventObject.pageY || (eventObject.clientY +
  (document.documentElement.scrollTop || document.body.scrollTop));
  return {
  ‘x‘: x,
  ‘y‘: y
  };
  };
   
  //获取文档的宽和高
  function getWindowSize(){
  var width = height = 0;
  if(this.innerWidth){
  width = this.innerWidth;
  height = this.innerHeight;
  }else if(document.documentElement && document.documentElement.clientHeight){
  width = document.documentElement.clientWidth;
  height = document.documentElement.clientHeight;
  }else if(document.body && document.body.clientHeight){
  width = document.body.clientWidth;
  height = document.body.clientHeight;
  }
   
  return {‘width‘:width,‘height‘:height};
  };
   
  //获取标签的宽、高和left、top
  function getDimensions(element){
  if (!(element = $(element))) return false;
   
  return {
  ‘left‘:element.offsetLeft,
  ‘top‘:element.offsetTop,
  ‘width‘:element.offsetWidth,
  ‘height‘:element.offsetHeight
  };
  }
   
  //设置标签样式
  function setStyle(element, styles) {
  if (!(element = $(element))) return false;
  for (property in styles) {
  if (!styles.hasOwnProperty(property)) continue;
   
  if (element.style.setProperty) {
  element.style.setProperty(
  uncamelize(property, ‘-‘), styles[property], null);
  } else {
  element.style[camelize(property)] = styles[property];
  }
  }
  return true;
  };
  //将-形式的字符串转换为驼峰命名法的字符串
  function camelize(s) {
  return s.replace(/-(\w)/g, function(strMatch, p1) {
  return p1.toUpperCase();
  });
  };
  //将驼峰命名法的字符串转换为-形式的字符串
  function uncamelize(s, sep) {
  sep = sep || ‘-‘;
  return s.replace(/([a-z])([A-Z])/g, function(strMatch, p1, p2) {
  return p1 + sep + p2.toLowerCase();
  });
  };
  </script>
  </html>

 

关于HTML5中拖放

标签:

原文地址:http://www.cnblogs.com/ddzhao1989/p/4641857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!