页面上元素的拖拽效果html5

页面上元素的拖拽效果html5(goole浏览器测试)

网页上把一张图片、或一段文字,拖到指定的位置;

  1. 创建拖拽对象;
    1. 给拖拽的对象设定draggable属性,true,false,auto(浏览器自己判断是否能被拖拽),
    2. 设定数据(文本或图片)
    3. function drag(e){
      e.dataTransfer.setData('Text', e.target.id);//拖拽对象一定要设定id
      }
      //看下面
  2. 处理拖拽事件;
    1. dragstart:当元素开始拖拽时触发;
    2. drag:在元素拖拽过程中触发;
    3. dragend:元素拖拽结束时触发;
  3. 创建投放区(拖拽完后还要阻止浏览器的默认行为);
    1. 接收数据,
      1. var data= e.dataTransfer.getData('Text');
    2. 把数据放到目标中去;
      1.e.target.appendChild(document.getElementById(data));
    3. 阻止浏览器默认的行为;
      1. e.preventDefault()

你可能感兴趣的:(HTML5,html5,拖拽)