拖拽.gif

為了讓元素可拖動(dòng)丐谋，需要設(shè)置元素的draggable=true屬性闸婴。
鏈接和圖片默認(rèn)是可拖動(dòng)的飞醉，不需要 draggable 屬性膀跌。

在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素):

  ondragstart - 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā)
  ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
  ondragend - 用戶完成元素拖動(dòng)后觸發(fā)

釋放目標(biāo)時(shí)觸發(fā)的事件:

  ondragenter - 當(dāng)被拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
  ondragover - 當(dāng)某一個(gè)被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
  ondragleave - 當(dāng)鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件
  ondrop - 在一個(gè)拖動(dòng)過(guò)程中遭商，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件

html結(jié)構(gòu)

    <div id="one" class="one">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
    </div>
    <div id="two" class="one"></div>

css

.one{
        width: 230px;
        height: 122px;
        border:1px solid #dcdcdc;
        display: inline-block;
        padding: 20px;
        font-size:0;
    }
    #one{
        margin: 0 100px 0 0;
        vertical-align: top;
    }
    .one div{
        font-size: 15px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: pink;
        display: inline-block;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        margin:0 10px 10px 0;
    }

js

       var temp = '';//放置被拖拽的對(duì)象
       document.addEventListener('dragstart',function(event){
           // 拖拽開(kāi)始
           temp = event.target;//獲取觸發(fā)事件的元素
           event.target.style.opacity = '0.5';
       },false)
       document.addEventListener('dragend',function(event){
           // 拖拽結(jié)束
           event.target.style.opacity = '';
       },false)
       document.addEventListener('dragover',function(event){
           //默認(rèn)情況下,數(shù)據(jù)/元素不能在其他元素中被拖放，所以要防止元素的默認(rèn)處理
           if(event.target.className == 'one'){
               event.preventDefault();
           }
       },false)
       document.addEventListener('drop',function(event){
           event.preventDefault();
           //釋放鼠標(biāo)
           event.target.appendChild( temp );
           event.target.style.borderColor = '';
       },false)
       document.addEventListener('dragenter',function(event){
           // 拖拽對(duì)象進(jìn)入容器范圍
           if(event.target.className == 'one'){
               event.target.style.borderColor = 'black';
           }
       },false)
       document.addEventListener('dragleave',function(event){
           //拖拽對(duì)象離開(kāi)容器范圍
           if(event.target.className == 'one'){
               event.target.style.borderColor = '';
           }
       },false)