Question

• 图片自带拖拽功能
• 其他元素可设置 draggable 属性
• draggable ：true
  • 拖拽元素（被拖拽元素对象) 事件 :
    • ondragstart : 拖拽前触发
    • ondrag :拖拽前、拖拽结束之间，连续触发
    • ondragend :拖拽结束触发
  • 目标元素（拖拽元素被拖到的对象) 事件 :
    • ondragenter :进入目标元素触发
    • ondragover :进入目标、离开目标之间，连续触发
    • ondragleave :离开目标元素触发
    • ondrop :在目标元素上释放鼠标触发
      • 需要在 ondragover 事件里面阻止默认事件
• 拖拽兼容问题
  • 火狐浏览器下需设置 dataTransfer 对象才可以拖拽除图片外的其他标签
    • dataTransfer 对象
    • setData() : 设置数据 key 和 value (必须是字符串)
    • getData() : 获取数据，根据 key 值，获取对应的 value
    • effectAllowed : 设置光标样式( none , copy , copyLink , copyMove , link , linkMove , move , all 和 uninitialized )
    • setDragImage ：三个参数（指定的元素，坐标 X ，坐标 Y ）
    • files ： 获取外部拖拽的文件，返回一个 filesList 列表
      • filesList 下有个 type 属性，返回文件的类型
• 读取文件信息
  • FileReader (读取文件信息)
    • readAsDataURL
  • 参数为要读取的文件对象
    • onload 当读取文件成功完成的时候触发此事件
    • this. result 获取读取的文件数据

examp01 拖拽案例

<div id="drap" draggable="true"></div>
<div id="box"></div>

#drap {
width: 100px;
height: 100px;
background: red;
}
#box {
width: 500px;
height: 500px;
border: 2px solid blue;
margin: 50px auto;
}

//被拖拽元素事件
drap.ondragstart = function(ev){ // 拖拽前
var ev = ev || window.event;

//火狐浏览器下需设置 dataTransfer 对象才可以拖拽除图片外的其他标签
ev.dataTransfer.setData("key","poetries");

//effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove,move, all 和 uninitialized)
ev.dataTransfer.effectAllowed = "copy";

//设置被拖拽的小元素 setDragImage ：三个参数（指定的元素，坐标 X，坐标 Y）
ev.dataTransfer.setDragImage(pic,25,25);

this.style.background = "green";
}

drap.ondrag = function(){ // 拖拽过程中
this.innerText = "被拖拽中...";
}

drap.ondragend = function(){ // 拖拽结束
this.style.background = "red";
this.innerHTML = "";
}

//目标元素事件
box.ondragenter = function(){ //进入目标元素触发
this.innerHTML = "可将文件拖放到这里!";
}
box.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
var ev = ev || window.event;
ev.preventDefault(); 
this.style.background = "pink";
}
box.ondragleave = function(){ //离开目标元素触发
this.innerHTML = "";
this.style.background = "none";
}
box.ondrop = function(ev){//在目标元素上释放鼠标触发
//alert("拖放结束")
this.innerHTML = ev.dataTransfer.getData("key");
}

在线演示

example02 拖拽相册

<h1>请拖拽图片到红框中</h1>
<div id="box"><span>可以将文件拖放到这里！！</span></div>
<div id="dustbin">垃圾回收站</div>

#box{
position:relative;
width:500px;
height:500px;
border:2px solid red;
margin:100px auto 0px;

}
#box span{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
height:50px;
width:192px;
margin:auto;
display:none;
}
img{
width:100px;height:100px;
}
#dustbin{
width:200px;
height:100px;
background:#000;
color:#fff;
font-size:40px;
text-align:center;
line-height:100px;
margin:auto;
}

var box = document.getElementById("box");
var dusTbin = document.getElementById("dustbin");
var span = box.getElementsByTagName("span")[0];
//目标元素事件
var img = '';
box.ondragenter = function(){//进入目标元素触发
span.style.display = "block";
}
box.ondragover = function(ev){//在目标元素上连续触发
var ev = ev||window.event;
ev.preventDefault();//阻止默认事件
span.style.display = "block";
}
box.ondragleave = function(){//离开目标元素
span.style.display = "none";
}
box.ondrop = function(ev){//在目标元素上面释放鼠标触发
//alert("拖拽结束！！");
var ev = ev||window.event;
ev.preventDefault();//阻止默认事件
span.style.display = "none";
var file = ev.dataTransfer.files;
//alert(file[0].type);
for (var i=0; i<file.length ;i++ )
{
if (file[i].type.indexOf("image")!=-1)
{
var read = new FileReader();//新建一个读取文件对象
read.readAsDataURL(file[i]);//读取文件
read.onload = function(){//读取文件成功之后调用什么函数
var img = document.createElement("img");
//alert(this.result);
img.src = this.result;
box.appendChild(img);
//获取 img 节点 实现删除功能
var oImg = document.getElementsByTagName("img");
if (oImg)
{
for (var j=0;j<oImg.length ;j++ )
{
oImg[j].ondragstart = function(ev){
ev.dataTransfer.setData("data",ev.target.innerHTML);
img = ev.target;
}
oImg[j].ondragend = function(ev){
ev.dataTransfer.clearData("data");//清楚数据
img = null;
}
}

}
//实现删除功能（移除 img 节点)
dusTbin.ondragover = function(ev){
ev.preventDefault();
}
dusTbin.ondrop = function(){
if (img)
{
img.parentNode.removeChild(img);
}
}
}
}else{
alert("请上传图片！");
}

}

}

在线演示

example03 拖拽排序

<div class="wrap" id="wrap">
  <ul id="box">
    <li style="background:#f3f" draggable="true">1</li>
    <li style="background:#ff6" draggable="true">2</li>
    <li style="background:#c60" draggable="true">3</li>
    <li style="background:#903" draggable="true">4</li>
    <li style="background:#0f6" draggable="true">5</li>
    <li style="background:#636" draggable="true">6</li>
    <li style="background:#36f" draggable="true">7</li>
    <li style="background:#033" draggable="true">8</li>
  </ul>
</div>

.wrap{
  width:500px;
  height:500px;
  margin:50px auto;
}
ul li{
  list-style:none;
  width:500px;
  height:50px;
  color:#fff;
  text-align:center;
  line-height:50px;
  font-size:40px;
  font-weight:bold;
}

var oUl = document.getElementById("box");
var oLi = oUl.getElementsByTagName("li");
var curr = 0;
function sort(){
  for (var i = 0;i < oLi.length;i++) {
    oLi[i].index = i;
    oLi[i].ondragstart = function(ev){
      var ev = ev || window.event;
      ev.dataTransfer.setData("data",this.innerHTML);
      //this.innerHTML = "被拖拽中...";
      curr = this.index;
    }

    oLi[i].ondragenter = function(){
      for(var i = 0;i < oLi.length;i++){
        oLi[i].style.border = "none";
      }
      if(curr != this.index){
        this.style.border = "2px solid #000";
      }
    }
    oLi[i].ondragover = function(e){
      var e = e || window.event;
      e.preventDefault();
    }
    oLi[i].ondrop = function(ev){ //鼠标释放的时候
      //oUl.insertBefore(oLi[curr],this);//insertBefore(新节点，目标节点)
      inserAfter(oLi[curr],this);
      this.style.border = "none";
      //oLi[curr].innerHTML = ev.DataTransfer.getData("data");
      sort();
    }
  }
}
sort();

function inserAfter(newItem,targerItem){
  var parentItem = targerItem.parentNode;
  if(parentItem.lastChild == targerItem){
    parentItem.appendChild(newItem);
  }else {
    parentItem.insertBefore(newItem,targerItem.nextSibling);
  }
}

在线演示